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

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

问题是您得到的是选择元素而不是选择的选项元素作为函数参数。而且它没有 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 规范有效。