Pada perubahan pilih, dapatkan nilai atribut data

Kode berikut mengembalikan 'tidak terdefinisi' ...

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

Anda perlu menemukan opsi yang dipilih:

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

atau

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

meskipun metode pertama lebih disukai.

Coba yang berikut ini:

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

Pelanggan perubahan Anda berlangganan acara perubahan pilihan, jadi thisparameternya adalah elemen pilih. Anda perlu menemukan anak yang dipilih untuk mendapatkan data-id dari.

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

Vanilla Javascript:

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

Anda dapat menggunakan contextsintaks dengan thisatau $(this). Ini adalah efek yang sama dengan 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>

Sebagai masalah optimasi mikro, Anda mungkin memilih find(). Jika Anda lebih suka pegolf kode, sintaks konteksnya lebih singkat. Itu datang ke gaya coding pada dasarnya.

Berikut ini adalah perbandingan kinerja yang relevan .

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

ini bekerja untuk saya

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

dan skripnya

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