我尝试了多种方法来获取所选项目的数据属性(data-iddata-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>

最佳答案

e.targetinput值,而不是该值来自的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>

关于javascript - HTML:是否仍然无法从数据列表中选择数据属性?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53585771/

10-12 12:52
查看更多