Manipular o elemento select com jQuery
Publicado em: 2009-04-13 — 75.753 visualizacoes
O elemento select destina-se a oferecer ao usuário um menu de opções para escolha de um ou mais itens. Este elemento deverá conter pelo menos um elemento option que se destina a marcar um item do menu de opções.
Os atributos do elemento select são:
name: define um nome de referência para o programa de processamento dos dados escolhidos;size: define o número de itens visíveis sem necessidade de abrir ou rolar oselect;multiple: habilita escolher mais de uma opção.
Este tutorial demonstra como manipular com jQuery um menu de opções construido com o elemento select. Para a demonstração proposta construimos um exemplo prático no qual você poderá constatar o funcionamento dos scripts desenvolvidos. Optamos por mostrar seis exemplos, mas a manipulação não se limita a eles. Se você quiser deixar sua contribuição fique à vontade para postar um comentário contendo o seu código de manipulação.
A marcação HTML do menu select constante da página exemplo é mostrada a seguir:
01.<select id="ex1" name="exemplo-um">02.<option value="opcao-um">Primeira opção</option>03.<option value="opcao-dois">Segunda opção</option>04.<option value="opcao-tres">Terceira opção</option>05.<option value="opcao-quatro">Quarta opção</option>06.<option value="opcao-cinco">Quinta opção</option>07.<option value="opcao-seis">Sexta opção</option>08.<option value="opcao-sete">Sétima opção</option>09.<option value="opcao-oito">Oitava opção</option>10.<option value="opcao-nove">Nona opção</option>11.<option value="opcao-dez">Décima opção</option>12.<option value="default" selected="selected">Opção default</option>13.</select>Veja nesta página o exemplo em funcionamento.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2009-04-13 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2009/04/13/manipular-o-elemento-select-com-jquery/trackback no seu site.
Excelente o seu tutorial!
Por acaso sabe de algum tutorial de select onde por exemplo: Ao selecionar um carro no primeiro select o segundo seja preenchido com preços que aquele carro possa ter?
Muito bom como sempre, agradeço por disponibilizar tantas dicas.
O prepend me foi muito útil, acabei acrescentando também o remove, para quem quiser remover um item é simples;
$(‘#ex6 option:selected’).remove();
Maujor,
seu site é demais, referência sempre.
estou tentando aumentar a altura do elemento select – sabe como posso fazer isso?
posso utilizar só css ou utilizo jquery?
no IE não funciona a altura, nos outros navegadores sim.
obrigada!
Muito bom este artigo, parabens maujor !
Parabéns pelo post.
Gostaria de saber como posso guardar numa variável o valor seleccionado numa combo box antes de faxer o submit da página.
Será isto possível?
Bjs
Fernanda
Como faria com a Jquery para quebra uma linha dentro de um option desses?
tipo assim:
“asdfasdfasdf asdfasdf asdf adsfasdfasdfasdf”
desde já agradeço a atenção.,
Muito bem explicado Maujor! Sem margem para dúvidas!
ótima matéria Maujor..
estou estudando jquery (já sei alguma coisa) e você tem me ajudado bastante..
Show de bola, parabéns Maujor!!!
Muito bacana, eu nem conhecia o atributo: multiple, fiquei curioso para conhecer mais sobre.
Abraço.