0

Queria que ao clicar no botão eu conseguisse puxar o value e data-dado da opção selecionada.

Tentei com o código abaixo, mas não funcionou:

$("#botaoexemplo").on("click", function() {
    var valor = $('#exemplo').val();
    var dado = $('#exemplo').attr(dado);
    console.log(valor, dado);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name='exemplo' id='exemplo' clas="exemplo">
  <option value='1' class='teste' data-dado='a'>1</option>
  <option value='2' class='teste' data-dado='b'>4</option>
  <option value='3' class='teste' data-dado='c'>3</option>
  <option value='4' class='teste' data-dado='d'>2</option>
</select>
<button id="botaoexemplo">Teste</button>

2 Respostas 2

3

Você precisa adicionar o :selected para identificar a opção selecionada e pode utilizar o metodo data() para retornar o valor do atributo, se quiser recuperar pelo attr() precisaria indicar o nome completo, no caso 'data-dado'.

Simples assim:

$("#botaoexemplo").on("click", function() {
        var valor = $('#exemplo').val();
        var dado = $('#exemplo :selected').data('dado');
        console.log(valor, dado);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='exemplo' id='exemplo' clas="exemplo">
        <option value='1' class='teste' data-dado='a'>1</option>
        <option value='2' class='teste' data-dado='b'>4</option>
        <option value='3' class='teste' data-dado='c'>3</option>
        <option value='4' class='teste' data-dado='d'>2</option>
    </select>
<button id="botaoexemplo">Teste</button>

1

é bem simples, gosto sempre de utilizar $("#campo option:selected") , e para pegar outro atributo do option use .attr("atributo").

$(function() {
      $("#botao").on("click", function() {
          var valor = $('#exemplo option:selected').val();
          var dado = $('#exemplo option:selected').attr('data-dado');
          console.log(valor, dado);
      });
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name='exemplo' id='exemplo' class="exemplo">
    <option value='1' data-dado='a'>1</option>
    <option value='2' data-dado='b'>4</option>
    <option value='3' data-dado='c'>3</option>
    <option value='4' data-dado='d'>2</option>
</select>
<button id="botao">Teste</button>

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 .