cómo devolver el atributo de datos de un elemento de opción en select?

Question

Im tratando de cerrar la sesión del atributo de datos que he adjuntado a cada opción en mi cuadro de selección pero sin éxito, ¿estoy correcto usando .on ('cambio' ... o qué debo hacer para lograr esto?

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 de cambio de option en realidad no tiene sentido que el option no está cambiando . El evento debe estar en el select.

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

Answer 2

Prueba esto,

Live Demo

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

Answer 3

Se parecen asignar el evento a los hijos de selecto que está mal .. Es necesario asignar el evento al seleccionar directamente ..

también this no tiene el atributo de datos. Es la option that is selected .. Así que cambiar su código a este

Prueba este

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

Puede que con vainilla Javascript:

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