Lors d'une sélection, obtenez la valeur de l'attribut de données

Le code suivant renvoie «non défini» ...

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

Vous devez trouver l'option sélectionnée:

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

ou

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

bien que la première méthode soit préférée.

Essayez ce qui suit:

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

Votre abonné au changement s'abonne à l'événement de changement de la sélection, le thisparamètre est donc l'élément de sélection. Vous devez trouver l'enfant sélectionné pour obtenir l'ID de données.

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

Javascript vanille:

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

Vous pouvez utiliser la contextsyntaxe avec thisou $(this). C'est le même effet 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>

En matière de microoptimisation, vous pouvez opter pour find(). Si vous êtes plutôt un golfeur de code, la syntaxe du contexte est plus brève. Il s'agit essentiellement du style de codage.

Voici une comparaison de performances pertinente .

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

ça marche pour moi

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

et le script

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