PURE JS получает выбранное значение атрибута данных атрибута возвращает Null

У меня есть этот 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>

и js

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

но он всегда предупреждает об ошибке вместо значения данных Где проблема, ребята? Благодаря

Ответ 1

Проблема заключается в том, что в качестве аргумента функции вы выбираете элемент select и не выбранный элемент.

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="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>

Ответ 2

Вы пытаетесь получить атрибут select data, а не параметр.

Кроме того, я вижу, что все атрибуты data идентичны. Затем вы можете переместить его из опции, чтобы выбрать себя: <select onchange="check_status(this);" name="status[171]" data="04f2cf35e4d7a1c0158459fd0450a605" > и использовать код, отрезанный от вашего вопроса, без изменений.

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>

Ответ 3

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

Ответ 4

Вы определяете настраиваемые атрибуты, используя атрибут data. В вашем коде нет атрибута custome, который, я уверен, вы хотите, чтобы он был идентификатором. Точный формат "data-*", где "*" заменяется на нужное имя настраиваемого атрибута, а затем устанавливается на нужное строковое значение. Таким образом, в вашем коде в идеале должно быть:

<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>

если вы хотите, чтобы пользовательский атрибут был "id".

Существует два способа получить значение атрибутов "данных" с использованием чистого JavaScript: в дополнение к хорошему старому способу get/setAttribute(), вы также можете получить доступ, используя свойство "dataset" элемента

Использование свойства DOM getAttribute()

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
 }

Использование свойства набора данных JavaScript

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