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 — 68.858 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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

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