PURE JS获取选定的选项数据属性值返回Null [英] PURE JS get selected option data attribute value returns 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);
}

，但是它总是警告null而不是数据值有问题的人在哪里?谢谢

but it always alerts null instead of data value Where is the problem guys? Thanks

推荐答案

问题是您将select元素而不是select option元素用作函数参数.而且它没有 data 属性.您必须像这样获得option属性:

The problem is that you get select element and not selected option element as function argument. And it does not have the data attribute. You have to get the option attribute like so:

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>

请注意，根据HTML5规范，我将属性名称更改为 data-uid 以使其有效.

Notice that I changed the attribute name to data-uid for it to be valid according to HTML5 specificaion.

这篇关于PURE JS获取选定的选项数据属性值返回Null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！