PURE JS get selected option data attribute value returns Null

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.

You are trying to get select data attribute, and not option's.

Also, I can see that all you data attributes are identical. Then you can move it from option to select itself: <select onchange="check_status(this);" name="status[171]" data="04f2cf35e4d7a1c0158459fd0450a605" > and use code snipped from your question unmodified.

function check_status(obj) {
  var uid =  obj.options[obj.selectedIndex].getAttribute('data');
  alert(uid)
}
<select onchange="check_status(this);" name="status[171]">
  <option selected="true" value="open" data="open04f2cf35e4d7a1c0158459fd0450a605">open</option>
  <option value="in_process" data="pending104f2cf35e4d7a1c0158459fd0450a605">pending</option>
  <option value="finished" data="finished04f2cf35e4d7a1c0158459fd0450a605">finished</option>
  <option value="canceled" data="canceled04f2cf35e4d7a1c0158459fd0450a605">canceled</option>
</select>

Tags:

Javascript

Recent Posts