Get data-attribute of a selected option when clicking button

Question

Get data-attribute of a selected option when clicking button

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

I wished that by clicking the button I would be able to pull value and data-dado of the selected option.

I tried the code below, but it did not work:

$("#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><selectname='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>

javascript jquery html5

asked by anonymous 09.04.2018 / 21:58

2 answers

1

It is very simple, I always like to use $ ("# field option: selected"), and to get another attribute of option use .attr ("attribute").

$(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><selectname='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>

10.04.2018 / 03:55

Saving past data - Django Web chart with C #

score 3 · Accepted Answer

You need to add :selected to identify the selected option and you can use the data() method to return the value of the attribute, if you want to recover by attr() you would need to indicate the full name, in the ' .

Simple like this:

$("#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><selectname='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>