How to pick attributes from an option field with jQuery

Question

I have the following code:

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

I know to catch the value of option selected can use:

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

But to get the attribute dado? How do you do?

Answer 1

You can use it like this: var dado = $(this).find(':selected').attr('dado');

The .find() seeks descending elements, and the :selected ensures that it only chooses the selected. Then using the .attr() you can get that attribute dado.

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

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

It would be more correct to use fields data-, because it was agreed that this would be better. Then in HTML you would have data-dado='a' and the whole code would look like this: https://jsfiddle.net/roc0a6pe/1/

You could also do it without jQuery...

In this case Javascript would be like this:

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/