使用原生javascript从select中读取数据属性

Read data attribute from select using native javascript

本文关键字：读取 数据属性 select 原生 javascript      更新时间：2023-09-26

问题很简单，我使用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/

因为没有本地getData，所以只需写入

getAttribute("data-label");
https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttribute

更新的版本(检查浏览器支持!)(11)

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

element.dataset.label

您可以使用getAttribute

: 

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

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

相关文章：