Skip to content
Advertisement

PURE JS get selected option data attribute value returns Null

I have this html:

<select onchange="check_status(this);" name="status[171]">    
    <option selected="true" value="open" data="04f2cf35e4d7a1c0158459fd0450a605">open</option>    
    <option value="in_process" data="04f2cf35e4d7a1c0158459fd0450a605">pending</option>    
    <option value="finished" data="04f2cf35e4d7a1c0158459fd0450a605">finished</option>    
    <option value="canceled" data="04f2cf35e4d7a1c0158459fd0450a605">canceled</option>    
</select>    

and js

function check_status(obj){    
    var uid = obj.getAttribute('data');
    alert(uid);
}

but it always alerts null instead of data value Where is the problem guys? Thanks

Advertisement

Answer

The problem is that you get select element and not selected option element as function argument. And it does not have the data attribute. You have to get the option attribute like so:

function check_status(obj) {
  var uid = obj.options[obj.selectedIndex].getAttribute('data-uid');
  alert(uid);
}
<select onchange="check_status(this);" name="status[171]">

  <option selected="true" value="open" data-uid="01f2cf35e4d7a1c0158459fd0450a601">open</option>
  <option value="in_process" data-uid="02f2cf35e4d7a1c0158459fd0450a602">pending</option>
  <option value="finished" data-uid="03f2cf35e4d7a1c0158459fd0450a603">finished</option>
  <option value="canceled" data-uid="04f2cf35e4d7a1c0158459fd0450a604">canceled</option>
</select>
Notice that I changed the attribute name to data-uid for it to be valid according to HTML5 specificaion.
Advertisement