如何使用javascript访问HTML元素的数据属性[重复]

Question

这个问题在这里已有答案：

• PURE JS get selected option data attribute value returns Null 4个答案

我的表单中有一个下拉菜单。每个选项都有3个与之关联的数据属性。当选择一个选项时，我调用一个函数，将隐藏的html对象的值设置为每个数据属性的值，以便我可以在下一页上提取该信息。但是，数据属性的值不断变为“未定义”。我究竟做错了什么？

 <script>
     function change_charge(x)
     {
     alert (x.dataset.amount); 
     }
 </script>

 <select name="description"  id="description" onchange="change_charge(this)">
     <option value="Test" data-amount="10.00" data-type="charge" >TEST      </option>
  </select>

我希望警报说出数据量的值，而是说“未定义”

我也尝试过：alert（x.getAttribute（'data-amount'））;

但是返回“null”。

Answer 1

This answer展示了如何从JavaScript获取自定义属性。

摘要：您可以使用getAttribute()

x.getAttribute("data-amount");

编辑：@James也提出了一个很好的观点，即x是选择器，而不是选项。因此，您可能需要我们两个答案的组合：

x.options[x.selecetdIndex].getAttribute("data-amount");

Answer 2

x是<select>，而不是<option>。 select没有数据属性。

如果您想要该选项，请使用

var option = x.options[x.selectedIndex];
console.log(option.dataset.amount);