seleccione el cambio, obtienen los datos de valor de atributo

Question

el siguiente código devuelve 'indefinido' ...

$('select').change(function(){ 
    alert($(this).data('id')); 
}); 

<select> 
    <option data-id="1">one</option> 
    <option data-id="2">two</option> 
    <option data-id="3">three</option> 
</select> 

Answer 1

es necesario encontrar la opción seleccionada:

$(this).find(':selected').data('id') 

o

$(this).find(':selected').attr('data-id') 

aunque se prefiere el primer método.

Answer 2

intente lo siguiente:

$('select').change(function(){ 
    alert($(this).children('option:selected').data('id')); 
}); 

Su cambio de abonado se suscribe al evento de cambio de la selección, por lo que el parámetro this es el elemento select. Necesitas encontrar el niño seleccionado para obtener el ID de datos.

Answer 3

JavaScript básico:

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

Answer 4

document.querySelector('select').onchange = function(){ 
    alert(this.selectedOptions[0].getAttribute('data-attr')); 
}; 

Answer 5

esto funciona para mí

<select class="form-control" id="foo"> 
    <option value="first" data-id="1">first</option> 
    <option value="second" data-id="2">second</option> 
</select> 

y el guión

$('#foo').on("change",function(){ 
    var dataid = $("#foo option:selected").attr('data-id'); 
    alert(dataid) 
}); 

Answer 6

$('#foo option:selected').data('id'); 

Answer 7

probar esto:

$('select').change(function(){ 
    alert($(this).val()); 
}); 

<select> 
    <option value="1">one</option> 
    <option value="2">two</option> 
    <option value="3">three</option> 
</select>