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 o select;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:
<select id="ex1" name="exemplo-um"> <option value="opcao-um">Primeira opção</option> <option value="opcao-dois">Segunda opção</option> <option value="opcao-tres">Terceira opção</option> <option value="opcao-quatro">Quarta opção</option> <option value="opcao-cinco">Quinta opção</option> <option value="opcao-seis">Sexta opção</option> <option value="opcao-sete">Sétima opção</option> <option value="opcao-oito">Oitava opção</option> <option value="opcao-nove">Nona opção</option> <option value="opcao-dez">Décima opção</option> <option value="default" selected="selected">Opção default</option> </select>
Veja nesta página o exemplo em funcionamento.
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
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.