Combobox aumenta de acordo com o titulo do select

[Marcos Coelho2 2]

Olá galera do imaster.

 

Dexa eu explicar o que eu quero fazer e nao encontro em lugar nenhum.

Entrem nesse link: http://www.amazon.com/

Do lado da busca no topo tem as categorias que o padrao é "all"

De acordo que voce muda as categorias o combobox toma um tamanho diferente

 

Como posso fazer isso?

 

qualquer duvida pode perguntar aki.

[Júlio Santos 3]

Basta você pegar o valor selecionado no select e usá-lo em um recipiente com width:auto.

 

Naquele caso é um select normal, só que sua estilização foi alterada usando Javascript e CSS.

[Marcos Coelho2 2]

Como posso fazer isso que você falou?

To tentando com um combobox simples.

 

<select style="width:auto;" name="select">

<option>Teste</option>

<option>TesteTesteTesteTesteTeste</option>

</select>

 

Se tiver como me dar exemplos

 

Parece que o pricipio é basicamente um tmanho fixo e quando se tem o foco mudar para auto pelo que tenho pesquizado aki, mas nada ta funcionando

[Marcos Coelho2 2]

Seguinda a dica do Júlio to tentando fazer assim

<select style="width:auto">

<option style="width:30px"> Texto </option>

<option style="width:70px"> Texto gfgfgfdvffffffffffffffffffgfdgfdg</option>

</select>

 

Até redimenciona mas a aba que abre pra baixo quando a opção é a primeira fica muito pequena.

Deem uma olhada no link http://pacoesportes.com/index2sas.htm

[Júlio Santos 3]

Marcos disse que o valor selecionado iria para um recipiente. No exemplo abaixo utilizei um span, e é ele que deve ter o width:auto;

 

HTML

<span id="recipiente" style="width:auto;">Padrão</span>

<select>
<option value="Pequeno">Pequeno</option>
<option value="Exemplo medio">Exemplo medio</option>
<option value="Exemplo muito grande">Exemplo muito grande</option>
</select>

 

JavaScript

<script>
$(function() {
	$("select").change(function() {
		var valor = $(this).val();
		$("#recipiente").text(valor);
	});
});
</script>

[Marcos Coelho2 2]

Da forma que você me passou ficou desse jeito

http://pacoesportes.com/index2sas.htm

 

Mas eu estou querendo que diminua de acordo com o tamanho do texto, ele ta ficando da mesma forma que o combobox comum.

[Júlio Santos 3]

Da forma que eu te passei é a forma que estão usando no Amazon. Lá eles usam o valor selecionado em um outro recipiente. Como disse no inicio, o select deles é estilizado pra ficar diferente, mas fazendo uso da tag <select>.

 

No outro tópico vi você pedindo pra alguém te dar a solução contando o numero de caracteres e atribuir o valor width do <select> de acordo com esse numero. Não vai dar certo (creio eu, não testei), pois cada caractere tem uma largura diferente. Um i tem largura diferente de um B.

 

Por isso uma forma de conseguir o que você quer é fazer do jeito que estou te mostrando. O que mostrei não é a solução completa, mas sim o caminho pra você conseguir e com isso aprender. Agora não vou poder te ajudar a fazer da maneira que está pedindo no outro tópico, pelo motivo que falei no parágrafo acima e por não conhecer uma solução.

 

Da forma que você me passou ficou desse jeito

http://pacoesportes.com/index2sas.htm

 

Mas eu estou querendo que diminua de acordo com o tamanho do texto, ele ta ficando da mesma forma que o combobox comum.

[Marcos Coelho2 2]

é realmente nao funcionará da forma que eu pensei sobre os caracteres pela diferença de tamanho, mas muito obrigado pela ajuda tentarei fazer da forma que voce me passou e postarei aqui.

[Júlio Santos 3]

beleza cara. Vai postando aí o que você não tiver conseguindo que vou/vamos te ajudando. Mas vai tentando / fuçando aí ... ;)