获取数据列表的数据属性

Get data attribute of Datalist

本文关键字：数据属性 列表 数据 获取      更新时间：2023-09-26

我将一些隐藏的数据加载到数据列表中，并将其与data属性绑定。

如果选择了值，我想获取相应数据属性的值。这是我的代码：

<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/

代码中有两个问题。首先，您需要从input元素获取val()，而不是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'));
});

工作示例

请注意，您的逻辑可能需要修改，以满足直接在input中键入值的人。

相关文章：