Question

我尝试了多种方法来获取所选项目的数据属性（data-id，data-key），但似乎没有任何效果。

一些资源提到无法专门针对datalist ...

现在是否有办法实现这一目标，还是仍然不可能？

我真的很喜欢香草Javascript方式。

document
  .getElementById('input-journal-item-company')
  .addEventListener("change", (e) => {
    console.log(e.target.dataset) // Empty object DOMStringMap {}
    console.log(e.target.dataset.id) // undefined
    console.log(e.target.getAttribute("data-id")) // null
  })

<input type="text" id="input-journal-item-company" list="input-companies">
<datalist id="input-companies">
    <option data-id="1" data-key="001" value="Company 1">Company 1</option>
    <option data-id="2" data-key="002" value="Company 2">Company 2</option>
    <option data-id="3" data-key="003" value="Company 3">Company 3</option>
</datalist>

Answer 1

尝试使用您的JavaScript：

document
  .getElementById('input-journal-item-company')
  .addEventListener("change", (e) => {
    const listOption = e.target.list.querySelector('[value="' + e.target.value + '"]');
    console.log(listOption.dataset.id);
    console.log(listOption.dataset.key);
  })

这里的关键是我们使用e.target.list来获取对<datalist>元素的引用，这实际上是在更改输入元素。从那里，我们可以用querySelector查询其子项，其子项的值与输入元素的值相匹配。

http://jsfiddle.net/eboc9yzj/

Answer 2

e.target是input的值，而不是该值来自的option。您需要搜索相应的选项。

document
  .getElementById('input-journal-item-company')
  .addEventListener("change", (e) => {
    const option = document.querySelector(`#${e.target.list.id} option[value='${e.target.value}']`);
    console.log(option.dataset) // Empty object DOMStringMap {}
    console.log(option.dataset.id) // undefined
    console.log(option.getAttribute("data-id")) // null
  })

<input type="text" id="input-journal-item-company" list="input-companies">
<datalist id="input-companies">
    <option data-id="1" data-key="001" value="Company 1">Company 1</option>
    <option data-id="2" data-key="002" value="Company 2">Company 2</option>
    <option data-id="3" data-key="003" value="Company 3">Company 3</option>
</datalist>

HTML：是否仍然无法从数据列表中选择数据属性？

2 个答案: