Javascript 如何将数据添加到选项标记？

我想向select元素中的option标记添加一个数据值。例如，数据价格，但我的问题是，我有多个选择标签。那么，如何让JavaScript获取用户选择的选项的数据值呢

我希望它如何工作： 选择元素1包含：

<select onchange="updatePrice()">
<option data-price="1">Apple $1</option>
<option data-price="2">Potato $2</option>
<option data-price="3">Bag of Grapes $3</option>
</select>

选择元素2包含：

<select onchange="updatePrice()">
<option data-price="5">Really good cake</option>
<option data-price="15">Super Good Cake</option>
</select>

那我真的不知道在JS里该怎么做。。。但我想让它抓取用户选择的内容，获取数据价格，然后通过添加select1+select2计算总数

---

编辑：我的答案不同于，因为我的问题更具体，需要不同的方法。即使这是特定的，它也可以通过得到的答案帮助开发人员在未来。因此，这不是一个重复的问题，而是一个比另一个更具体的问题。尽管这个问题有一个更简单的答案，如果开发人员知道如何回答，可以插入。

这里有一些代码与您的描述相匹配。注意：使用value属性可以从select元素直接访问选项值。一元运算符+将两个值从字符串转换为可操作的数字。第三个div只是显示输出的总值

函数更新价格{ var s1=document.getElementByIdoption1； var s2=document.getElementByIdoption2； var total=+s1.value++s2.value； document.getElementByIdprice.innerHTML=总计：$+总计 //获取所选选项中的文本的步骤 var h1=s1.options[s1.selectedIndex].text； 返回总数； } 苹果1美元 土豆2美元 一袋葡萄3美元 真好吃的蛋糕 超级好蛋糕

---

这有点棘手。您需要提供一个标识符，这样我们的代码就不会混淆

<select id="goods1" onchange="updatePrice(this)">
    <option data-price="0">Select one</option>
    <option data-price="1">Apple $1</option>
    <option data-price="2">Potato $2</option>
    <option data-price="3">Bag of Grapes $3</option>
</select>

<select id="goods2" onchange="updatePrice(this)">
    <option data-price="0">Select one</option>
    <option data-price="5">Really good cake</option>
    <option data-price="15">Super Good Cake</option>
</select>

首先，添加一个全局变量来存储当前价格。其次，存储标识符和价格值。最后，操纵当前价格

<script>
  let price = 0;
  let stored = {};

  const updatePrice = elm => {
    const id = elm.id;
    const selectedPrice = parseInt(
      Array.from(
        elm.children
      ).filter(x => x.selected)[0].dataset.price
    );

    price = 0;
    stored[id] = selectedPrice;

    Object.keys(stored).forEach(key => price += stored[key]);

    console.log(`Price: ${price}`);
  };
</script>

---

向所有selectbox添加一些唯一的类，这些类的值需要参与总计算，比如mul\u ck

---

为什么不直接使用value属性？@Phil不应该为物品的名称保留该属性吗？此外，它也不具体，因此如果我想添加另一个值或数据属性，我可能会在将来感到困惑。@MikeMcCaughan的可能副本请阅读我的编辑。你的问题是，那么我如何让JavaScript获取用户选择的选项的数据值？那个问题的答案回答那个问题…我不明白为什么我的答案被否决了。不过我是根据这个问题来回答的。我不确定是谁投了反对票，但这是一张赞成票。你的回答是正确的，但我会坚持基冈的回答，无论如何谢谢你：。事实上，你的方法对我更有效。。。谢谢：。这是。。。非常容易理解，比我想象的要简单得多，非常感谢你，我永远不会做到这一点。但我想你和菲尔关于使用值而不是数据属性的看法是对的。。。再次感谢，非常有帮助。事实上，我遇到了一个问题。。。我忘了我在发送表单数据时依赖value属性。。。所以我需要value属性为value=reallyGoodCake，我如何得到两个值？或者我应该坚持使用数据属性？我在updatePrice函数中添加了一种方式，您可以通过这种方式获取所选选项标记中的文本。非常感谢您的回答，但是Wisnu的回答对我很有用，我将坚持使用它一段时间。尽管这可能会在以后派上用场。非常感谢您的回答和编辑。

//when even a single selectbox change it will trigger re-calculation
$('.mul_ck').change(function(){
    var total = 0;
    //grab all _mul_ck_ and loop over them
    $('.mul_ck').each(function(){
        var selectValue = $(this).find(":selected").attr('data-price');
        total += parseFloat(selectValue);
    });
    alert(total);
});