come restituire l'attributo dati di un elemento opzione in select?

Question

Sto cercando di disconnettere l'attributo di dati che ho allegato ad ogni opzione nella mia casella di selezione ma senza successo, sto correggendo usando .on ('cambia' ... o cosa dovrei fare per raggiungere questo?

JS

$('select').children().on('change', function(e){ 
    console.log($(this).data('id')); 
    e.preventDefault(); 
}); 

HTML

<select> 
<option value="1" data-id="option1">wgwg</option> 
<option value="1" data-id="option2">wgwerg</option> 
<option value="1" data-id="option3">wgwg</option> 
<option value="1" data-id="option4">wgr</option> 
</select>​ 

Answer 1

Un evento di modifica sul option in realtà non ha senso come il option non cambia . L'evento dovrebbe essere il select.

$('select').on('change', function(e){ 
    console.log($(this).find("option:selected").data('id')); 
    e.preventDefault(); 
}); 

Answer 2

Prova questo,

Live Demo

$('select').on('change', function(e){ 
    console.log($('option:selected', this).data('id')); 
    e.preventDefault(); 
}); 

Answer 3

Lei sembra assegnare l'evento per i figli di selezionare che è sbagliato .. È necessario assegnare l'evento al di selezione direttamente ..

anche this non ha l'attributo di dati. E 'il option that is selected .. Quindi modificare il codice per questo

Prova questa

$('select').on('change', function(e){ 
     console.log($(this).find('option:selected').attr('data-id')); 
    }).change(); 

O

$('select').on('change', function(e){ 
      console.log($(this).find('option:selected').data('id')); 
     }).change(); 

Answer 4

È possibile con Vanilla JavaScript:

console.log(this.querySelector(':checked').getAttribute('data-id'))