5

Tenho o seguinte código:

<select name='exemplo' id='exemplo'>
    <option value='1' class='teste' dado='a'>1</option>
    <option value='2' class='teste' dado='b'>4</option>
    <option value='3' class='teste' dado='c'>3</option>
    <option value='4' class='teste' dado='d'>2</option>
</select>

Sei que para pegar o value do option selecionado posso usar:

$('#exemplo').change(function(){
    var valor=$(this).val();
)};

Mas e para pegar o atributo dado? Como faz?

1 Resposta 1

9

Podes usar assim: var dado = $(this).find(':selected').attr('dado');

O .find() procura elementos descendentes, e o :selected garante que só escolhe os selecionados. Depois usando o .attr() podes ir buscar esse atributo dado.

$('#exemplo').change(function() {
    var valor = this.value;
    var dado = $(this).find(':selected').attr('dado');
    console.log(valor, dado);
});

jsFiddle: https://jsfiddle.net/roc0a6pe/

Seria mais correto usares campos data-, pois convencionou-se que isso seria melhor. Nesse caso no HTML terias data-dado='a' e o código todo ficaria assim: https://jsfiddle.net/roc0a6pe/1/

Podias também fazer isso sem jQuery...

Nesse caso o JavaScript seria assim:

var select = document.getElementById('exemplo');
select.addEventListener('change', function() {
    var valor = this.value;
    var dado = this.querySelector('option:checked').dataset.dado;
    console.log(valor, dado);
});

jsFiddle: https://jsfiddle.net/roc0a6pe/3/

7
  • Recomendo de usar .bind( é melhor e não .change(, por motivo depende a versão jQuery. $('#exemplo').bind('change', function() {
    – KingRider
    Commented 10/08/2016 às 14:57
  • 1
    @KingRider o .change() foi adicionado na versão 1.0. A mesma que o .bind()
    – Sergio
    Commented 10/08/2016 às 15:01
  • 1
    Perfeito!! Obrigada Commented 10/08/2016 às 15:03
  • @Sergio, negativo e nada mesma, veja sobre dele, caso o navegador nem todas funciona função jquery e segue (elijahmanor.com/…) ... esse vc colocou o codigo javascript puro muito bom, option:checked hum nem conhecia... bom saber, obrigado!
    – KingRider
    Commented 10/08/2016 às 15:03
  • 1
    Ual, essa dica me ajudou demais, obrigado @Sergio Commented 18/12/2017 às 18:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .