PURE JS get selected option data attribute value returns Null

Answer 1

You define custom attributes using the "data" attribute. In your code, there is not custome attribute which I'm sure you wanted it to be an ID. The exact format is "data-*", where "*" is replaced with the desired custom attribute name, then set to the desired string value. So in your code, it should ideally be:

<select onchange="check_status(this);" name="status[171]">
  <option selected="true" value="open" data-id="open04f2cf35e4d7a1c0158459fd0450a605">open</option>
  <option value="in_process" data-id="pending104f2cf35e4d7a1c0158459fd0450a605">pending</option>
  <option value="finished"   data-id="finished04f2cf35e4d7a1c0158459fd0450a605">finished</option>
  <option value="canceled"   data-id="canceled04f2cf35e4d7a1c0158459fd0450a605">canceled</option>
</select>

assuming you want the custom attribute to be "id".

There are two ways you can retrieve the value of "data" attributes using pure JavaScript: in addition to the good old fashion get/setAttribute(), you can also access using the "dataset" property of the element

Using DOM's getAttribute() property

function check_status(obj) {
      var myoption = obj.options[obj.selectedIndex];
      var uid = myoption.getAttribute('data');
      alert(uid);
      // setting and removing the data-id attribute
      myoption.setAttribute("data-id", "foo") //changes "data-id" to "foo"
      myoption.removeAttribute("data-id") //removes "data-id" attribute entirely
 }

Using JavaScript's dataset property

function check_status(obj) {
      var myoption = obj.options[obj.selectedIndex];
      var uid = myoption.dataset.id;
      alert(uid);
      var statusId = myoption.dataset["id"] 
      alert(statusId);
}