Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Manipular o elemento select com jQuery

Publicado em: 2009-04-13 — 70.131 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 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.

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 http://www.maujor.com/blog/2009/04/13/manipular-o-elemento-select-com-jquery/trackback no seu site.

10 comentários na matéria: “Manipular o elemento select com jQuery”

  1. mauroNo Gravatar disse:

    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?

  2. DanielNo Gravatar disse:

    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();

  3. marianaNo Gravatar disse:

    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!

  4. BrunoNo Gravatar disse:

    Muito bom este artigo, parabens maujor !

  5. Fernanda MartinsNo Gravatar disse:

    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

  6. GuilhermeNo Gravatar disse:

    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.,

  7. Thiago CavalcantiNo Gravatar disse:

    Muito bem explicado Maujor! Sem margem para dúvidas!

  8. BernardoNo Gravatar disse:

    ótima matéria Maujor..
    estou estudando jquery (já sei alguma coisa) e você tem me ajudado bastante..

  9. NetoNo Gravatar disse:

    Show de bola, parabéns Maujor!!!

  10. SérgioNo Gravatar disse:

    Muito bacana, eu nem conhecia o atributo: multiple, fiquei curioso para conhecer mais sobre.

    Abraço.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo