javascript - 如何使用 JAVASCRIPT 获取 <option> 标签内自定义属性的值

Question

我的下拉菜单有一个自定义属性，我想做的是在标签中显示自定义属性值。

这是一个代码片段:

function setDesignation(d){
  var designation = d.getAttribute("data-designation");
  if(designation != null){
  	document.getElementById('designation').innerHTML = designation;
  }else{
  	document.getElementById('designation').innerHTML = 'Name';
  }
  //alert(d.getAttribute("data-designation"));
}

<div>
    <select onchange="setDesignation(this)">
        <option value="1" data-designation="President">Mathew</option>
        <option value="2" data-designation="CEO">Mark</option>
        <option value="3" data-designation="Manager">Luke</option>\
        <option value="4" data-designation="">John</option>
    </select>
</div>

<div>
    <label id="designation">Designation</label>
</div>

问题是我无法获取自定义属性的值，即“data-designation”。我试图将它放在 alert() 方法中以查看值，它显示 “null”。即使我删除了 if else 语句，它仍然返回 null。我不知道代码有什么问题，所以请帮助我。

我试图找到解决方案，但我找到的都是 jQuery。我不擅长 jQuery，所以我想要一个纯 JAVASCIPT 解决方案。

附言如果您的解决方案是将其存储在 value 属性中，那不是我要找的。

Answer 1

您不需要 selects 数据属性，您需要 selected options 数据属性:

var designation = d.options[d.selectedIndex].getAttribute("data-designation");