纯 JS 获取所选选项数据属性值返回 Null

PURE JS get selected option data attribute value returns Null

本文关键字：数据属性 返回 Null 选项 JS 获取      更新时间：2023-09-26

我有这个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);
}

但它总是提醒空而不是数据值问题出在哪里？谢谢

问题是你得到选择元素而不是选定的选项元素作为函数参数。而且它没有data属性。您必须像这样获取选项属性：

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>
请注意，我将属性名称更改为 data-uid，以便根据 HTML5 规范使其有效。

您正在尝试获取选择数据属性，而不是选项。

另外，我可以看到您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>

您可以使用"data"属性定义自定义属性。在您的代码中，没有自定义属性，我确定您希望它是一个 ID。确切的格式为 "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检索"data"属性的值：除了老式的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);
}

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