Question

问题很简单，我使用jquery找到了一些答案，但在本机JS中没有找到答案。

无法读取标签的值，它应该在IE8 +

中工作

var select = document.getElementById('test');

select.onchange = function() {
    //Value works fine 
    //alert(select.options[0].value);

    //How can I read data attribute?
    alert(select.options[0].data-label);
}

HTML：

<select id="test">
    <option data-label="label-1" value="HK">Hong Kong</option>
    <option data-label="label-2" value="CH">China</option>
</select>

http://jsfiddle.net/Lnybn/

Answer 1

因为没有原生的getData，所以你需要说

getAttribute("data-label");

https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttribute

更新版本（检查浏览器支持！IE 11！）

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

element.dataset.label

Answer 2

您可以使用getAttribute。

像这样：

alert(select.options[0].getAttribute('data-label'));

演示：http://jsfiddle.net/Lnybn/1/

使用本机javascript从select中读取数据属性

2 个答案: