获取Datalist的数据属性

Question

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

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

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

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

就我而言，我只得到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>

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

工作示例

请注意，您的逻辑可能需要修改以迎合直接在input.