Получить атрибут данных Datalist

Question

Я загружаю некоторые скрытые данные в datalist и привязываю его с помощью data attribute.

Если значение выбрано, я хочу получить значение соответствующего атрибута данных. Это мой код:

<input list="browser" id="number"> 
<datalist id="browser"> 
    <option data-customValue="Abc" value="Firefox">1</option> 
    <option data-customValue="Def" value="Chrome">2</option> 
    <option data-customValue="Ghi" value="Explorer">3</option> 
</datalist> 

$('#number').on('input', function() { 
    var value = $('#browser').val(); 
    alert($('#browsers [value="' + value + '"]').data('customValue')); 
}); 

В моем случае, я получаю только undefined в качестве ответа.

Вот скрипка: https://jsfiddle.net/bd4rpztk/1/

Answer 1

Там две проблемы в вашем коде. Во-первых, вам необходимо получить val() от элемента input, а не datalist. Во-вторых, имена атрибутов data должны быть строчными, в противном случае это мешает внутреннему кешу jQuery. Имея это в виду, попробуйте следующее:

<input list="browser" id="number"> 
<datalist id="browser"> 
    <option data-customvalue="Abc" value="Firefox">1</option> 
    <option data-customvalue="Def" value="Chrome">2</option> 
    <option data-customvalue="Ghi" value="Explorer">3</option> 
</datalist> 

$('#number').on('input', function() { 
    var value = $(this).val(); 
    alert($('#browser [value="' + value + '"]').data('customvalue')); 
}); 

Working example

Обратите внимание, что ваша логика может понадобиться изменить, чтобы удовлетворить людей, которые печатают значение напрямую к input.