获取数据属性onchange事件

Question

我正在尝试检索已添加到选项元素的自定义数据属性，但它不起作用。

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction(this.data-price)">
  <option data-price="250" value="Audi">Audi</option>
  <option data-price="130" value="BMW">BMW</option>
  <option data-price="120" value="Mercedes">Mercedes</option>
  <option data-price="400" value="Volvo">Volvo</option>
</select>

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

function myFunction(val) {
  document.getElementById("demo").innerHTML = "You selected: " + val;
  console.log(val);
}

问题是当我将函数调用切换为：

onchange="myFunction(this.value)">

它正确返回值，但是当我选择数据价格时，它返回undefined到控制台。

Answer 1

您的代码说“获取数据属性”并从中减去变量“价格”。第二个问题，当属性存在于选项中时，您将在选择上选择该属性。你不能像价值一样使用它。

您应该在所选选项上使用数据集

function myFunction(sel) {
  var opt = sel.options[sel.selectedIndex];
  var price = opt.dataset.price
  document.getElementById("demo").innerHTML = "You selected: " + price;
}

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction(this)">
  <option data-price="250" value="Audi">Audi</option>
  <option data-price="130" value="BMW">BMW</option>
  <option data-price="120" value="Mercedes">Mercedes</option>
  <option data-price="400" value="Volvo">Volvo</option>
</select>

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