触发“更改”事件侦听器后，如何获取“选项”标签的自定义属性？

Question

我的HTML：

<select>
    <option customAttr="foo">Foo Text</option>
    <option customAttr="bar">Bar Text</option>
</select>

我的JS：

selectElement.addEventListener("change",function(){
    console.log(this.getAttribute("customAttr"));
});

这仅记录null 。 为什么？ 如何使其记录customAttr的值？

Answer 1

您必须将选定的选项作为目标，如下所示：

 var selectElement = document.querySelector('select'); selectElement.addEventListener("change",function(){ var option = this.options[this.selectedIndex]; console.log(option.getAttribute("customAttr")); }); 

 <select> <option customAttr="foo">Foo Text</option> <option customAttr="bar">Bar Text</option> </select> 

Answer 2

您还可以通过在选项标签中添加值来访问属性，如下所示：

 const select = document.getElementById('select'); select.addEventListener("change", (e) => { const options = select.querySelectorAll("option"); const item = e.target.value; console.log(options[item].getAttribute('customAttr')); }); 

  <select id='select'> <option value='0' customAttr="foo">Foo Text</option> <option value='1' customAttr="bar">Bar Text</option> </select>