При выборе варианта выберите значение атрибута данных

Следующий код возвращает 'undefined'...

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

Ответы

Ответ 1

Вам нужно найти выбранную опцию:

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

или

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

хотя предпочтительным является первый метод.

Ответ 2

Попробуйте следующее:

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

Ваш абонент изменений подписывается на событие изменения выбора, поэтому параметр this является элементом выбора. Вам нужно найти выбранного дочернего элемента, чтобы получить идентификатор данных.

Ответ 3

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

Ответ 4

Vanilla Javascript:

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

Ответ 5

это работает для меня

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

и script

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