En el cambio de selección, obtenga el valor del atributo de datos

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>

Necesita encontrar la opción seleccionada:

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

o

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

aunque se prefiere el primer método.

Intenta lo siguiente:

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

Su suscriptor de cambio se suscribe al evento de cambio de select, por lo que el thisparámetro es el elemento select. Debe encontrar el elemento secundario seleccionado para obtener el ID de datos.

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

Javascript de vainilla:

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

Puede usar la contextsintaxis con thiso $(this). Este es el mismo efecto que find().

$('select').change(function() {
    console.log('Clicked option value => ' + $(this).val());
    <!-- undefined console.log('$(this) without explicit :select => ' + $(this).data('id')); -->
    <!-- error console.log('this without explicit :select => ' + this.data('id')); -->
    console.log(':select & $(this) =>    ' + $(':selected', $(this)).data('id'));
    console.log(':select & this =>       ' + $(':selected', this).data('id'));
    console.log('option:select & this => ' + $('option:selected', this).data('id'));
    console.log('$(this) & find =>       ' + $(this).find(':selected').data('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option data-id="1">one</option>
    <option data-id="2">two</option>
    <option data-id="3">three</option>
</select>

Como cuestión de microoptimización, puede optar por find(). Si usted es más un jugador de código, la sintaxis de contexto es más breve. Se reduce básicamente al estilo de codificación.

Aquí hay una comparación de rendimiento relevante .

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

esto funciona para mi

<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)
});