javascript - Get data attribute of Datalist - Stack Overflow

admin管理员组

文章数量:1345186

I load some hidden data into a datalist and bind it with the data attribute.

If a value selected, I want to get the value of the corresponding data attribute. This is my code:

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

In my case, I only get undefined as a response.

Here is the fiddle: /

I load some hidden data into a datalist and bind it with the data attribute.

If a value selected, I want to get the value of the corresponding data attribute. This is my code:

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

In my case, I only get undefined as a response.

Here is the fiddle: https://jsfiddle/bd4rpztk/1/

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 16, 2016 at 15:10 Evgenij Reznik asked Mar 16, 2016 at 15:04 Evgenij ReznikEvgenij Reznik 18.6k4242 gold badges115115 silver badges191191 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

There's two issues in your code. Firstly you need to get the val() from the input element, not the datalist. Secondly data attribute names should be lowercase otherwise it interferes with jQuery's internal cache. With that in mind, try this:

<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

Note that your logic may need to be amended to cater for people who are typing a value directly in to the input.

本文标签： javascriptGet data attribute of DatalistStack Overflow