How do I get the custom attribute of an “option” tag after firing the “change” event listener?

Question

My HTML:

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

My JS:

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

This only logs null . Why? How do I make it log the value of customAttr ?

Answer 1

You have to target the selected option like the following:

 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

You can also access to your attribute by adding a value in your option tag, like this :

 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>