下拉框添加data-value后无法显示对应值，请求代码排查修复

问题根源 #

你的代码存在两个关键错误：

1. 获取对象错误：你直接在<select>元素上尝试读取data-value，但该属性实际定义在<option>子元素上
2. 语法错误：JavaScript中不能直接通过.data-value访问带连字符的属性，这会被解析为减法运算，而非属性访问

修正后的代码 #

<!DOCTYPE html>
<html>
<body>

<p>Select your pricing on different location</p>

<select id="mySelect" onchange="myFunction()">
  <option value="$1,000" data-value="$2,000">Price 1</option>
  <option value="$2,000" data-value="$3,000">Price 2</option>
  <option value="$3,000" data-value="$4,000">Price 3</option>
  <option value="$4,000" data-value="$5,000">Price 4</option>
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

<p id="pricing"></p>
<p id="pricing-value"></p>

<script>
function myFunction() {
  const selectElement = document.getElementById("mySelect");
  // 获取当前选中的option元素
  const selectedOption = selectElement.options[selectElement.selectedIndex];
  
  const basePrice = selectElement.value;
  // 方式1：使用HTML5标准的dataset API（推荐）
  const locationPrice = selectedOption.dataset.value;
  // 方式2：兼容老浏览器的getAttribute方法
  // const locationPrice = selectedOption.getAttribute('data-value');
  
  document.getElementById("pricing").innerHTML = "You selected: " + basePrice;
  document.getElementById("pricing-value").innerHTML = locationPrice + " VALUE ";
}
</script>

</body>
</html>

关键说明 #

• 使用selectElement.options[selectElement.selectedIndex]可以精准定位到当前选中的<option>元素
• dataset API是HTML5提供的标准方式，用于访问data-*属性：所有以data-开头的属性会被聚合到dataset对象中，连字符会自动转为驼峰命名（例如data-value对应dataset.value）
• 如果需要兼容IE11等老浏览器，可改用getAttribute('data-value')直接读取属性值

内容的提问来源于stack exchange，提问作者yoon_seri