使用原生javascript從選擇中讀取數據屬性

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/