Question

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

但它始终警告null而不是数据值问题在哪里？感谢

Answer 1

问题是你得到了select元素而没有选择option元素作为函数参数。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

此外，我可以看到所有data属性都相同。然后，您可以从选项中移动它以选择自己：<select onchange="check_status(this);" name="status[171]" data="04f2cf35e4d7a1c0158459fd0450a605" >并使用未修改的问题中剪切的代码。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

Answer 4

您可以使用＆＃34;数据＆＃34;定义自定义属性。属性。在您的代码中，没有custome属性，我确定您希望它是一个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>

假设您希望自定义属性为＆＃34; id＆＃34;。

有两种方法可以检索＆＃34;数据＆＃34;使用纯JavaScript的属性：除了旧的时尚get / setAttribute（）之外，您还可以使用＆＃34;数据集＆＃34;元素的属性

使用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);
}

PURE JS获取选中的选项数据属性值返回Null

4 个答案: