Question

<input type="text" value="" list="department" />
<datalist id="department">
    <option data-id="1" value="arthur"></option>
    <option data-id="2" value="arthur"></option>
    <option data-id="3" value="king"></option>   
    <option data-id="4" value="gabriel"></option>
</datalist>

我只需要点击“#button”或任何事件，从所选的datalist选项中访问'data-id'的值。有一种情况：相同的值名称，但不同的数据ID。我想获得正确的ID。我该怎么办？想你！

Answer 1

使用vanilla JavaScript可以通过两种方式轻松访问这些值，并且不会与常规属性冲突。使用

element.dataset[foo]
element.getAttribute('data-' + foo)（这个有更多遗产支持）

其中foo是数据属性的名称，即您案例中的"id"

<input>，<datalist>对不强制从提供的<option>中做出选择，因此无法直接查看选择了哪个选项，如果您需要这使用<select>代替。

但是，您可以通过迭代它们并检查值来查找是否有<option>与选择匹配。请记住，也有不匹配的情况。

如何执行此操作的示例如下

document.getElementById('check').addEventListener('click', function () {
    var output = document.getElementById('output'),
        input = document.getElementById('foo'),
        list = document.getElementById('bar'),
        i;
    for (i = 0; i < list.options.length; ++i) {
        if (list.options[i].value === input.value) {
            output.textContent = list.options[i].getAttribute('data-id');
            return;
        }
    }
    output.textContent = 'No match found';
});

<input id="foo" type="text" value="" list="bar" />
<datalist id="bar">
    <option data-id="0" value="fizz"></option>
    <option data-id="1" value="buzz"></option>>
</datalist>

<button id="check">Check</button>
<span id="output">Make choice, click check</span>

Answer 2

由于您使用的是jquery， data() 应该可以胜任：

var id = $( '#department option:selected' ).data( 'id' );

现在id应包含所选选项的值。

<强>更新

另外，

1）如果你想确保id变量是一个你应该使用的整数：

parseInt( $( '#department option:selected' ).data( 'id' ) ).

2）将您的<datalist>元素更改为<select>元素。数据列表在键入时用于自动完成，而select元素允许您实际选择一个选项。

如何从所选（不同的id，同名）datalist（html5）选项中获取data-id属性的值？

2 个答案: