如何使用 javascript 访问 HTML 元素的数据属性

Question

我的表单中有一个下拉菜单。每个选项都有 3 个与之关联的数据属性。选择一个选项后，我调用一个函数，将隐藏的 html 对象的值设置为每个数据属性的值，这样我就可以在下一页上提取该信息。但是，数据属性的值不断上升为 "undefined"。我究竟做错了什么？

 <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>

我希望警报说出数据量的值，但它却说 "undefined"

我也试过：警报 (x.getAttribute('data-amount'));

但是那个returns"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);

如何使用 javascript 访问 HTML 元素的数据属性

How to access data-attributes of HTML elements using javascript

html

javascript

custom-data-attribute