Javascript 获取数据属性onchange事件

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

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

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

onchange="myFunction(this.value)">

---

它正确返回值，但当我选择数据价格时，它会将未定义返回控制台。

只需访问所选选项jQuery示例的数据属性，因为您标记了它：

$mySelect.changefunction{ const$this=$this；//缓存$this const dataVal=$this.find'：selected.data'price'；//获取数据值 const selectedVal=$this[0]。值； 警报`${dataVal}，${selectedVal}`； }; 从列表中选择一辆新车

奥迪 宝马 梅赛德斯 沃尔沃汽车 选择新车时，会触发一个功能，输出所选车辆的值

---

您的代码表示获取数据属性并从中减去可变价格。第二个问题是，当属性位于选项上时，您正在选择“选择”上的属性。你不能像对待价值一样行事

您应该在所选选项上使用

函数myFunctionsel{ var opt=sel.options[sel.selectedIndex]； var price=opt.dataset.price document.getElementByIddemo.innerHTML=您选择的：+price； } 从列表中选择一辆新车

奥迪 宝马 梅赛德斯 沃尔沃汽车 选择新车时，会触发一个功能，输出所选车辆的值

---

这不正确。。。。这个数据-价格是这样说的。数据减去价格，这不是你读取数据的方式attributes@coderHelper我尝试过它返回完整的select元素@epascarello我该怎么做？@coderHelper它会产生一个错误，因为您内联了js函数调用，但从来没有这样做过。我已经删除了它，它不再产生错误。问题是我不想在jquery中尝试这个，因为我有一个表单重复器，这个重复器只会选择第一个表单。添加的不会触发任何事件。它只对第一个元素有效，我得到的是重复的元素from@ZakariaSichaib，那么为什么要标记jQuery？此外，这将与您的表单转发器完美配合。只需将选择器更改为类选择器：$.myCustomClassSelectorForAllDropDowns.changefunction{…}。你不需要内联你的JS来工作。

onchange="myFunction(this.value)">