我尝试了多种方法来获取所选项目的数据属性(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>
最佳答案
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>
关于javascript - HTML:是否仍然无法从数据列表中选择数据属性?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53585771/