如何将数据添加到选项标签？答案

【问题标题】：How do you add data to an option tag?如何将数据添加到选项标签？
【发布时间】：2018-03-05 22:44:43
【问题描述】：

我想在选择元素的选项标签中添加一个数据值。例如data-price，但我的问题是我有多个选择标签。那么如何让 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 中该做什么...但我希望它获取用户选择的内容，获取 data-price 然后计算总数（只需添加 select1 + select2）。

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

【问题讨论】：

为什么不直接使用value 属性？
@Phil 不应该保留项目名称吗？它也不是具体的，所以如果我想添加另一个 value 或数据属性，我将来可能会感到困惑。
On select change, get data attribute value的可能重复
@MikeMcCaughan 请阅读我的编辑。
您的问题是字面意思，“那么我如何让 JavaScript 获取用户选择的选项的数据值？”该问题的答案回答了该问题...

标签： javascript html

【解决方案1】：

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

function updatePrice(){
    var s1 = document.getElementById("option1");
    var s2 = document.getElementById("option2");
    var total = +s1.value + +s2.value; 
    document.getElementById("price").innerHTML = "Total: $" + total

    // to get the text within the selected option
    var h1 = s1.options[s1.selectedIndex].text;

    return total;
}

<select id="option1" onchange="updatePrice()">
    <option value="1">Apple $1</option>
    <option value="2">Potato $2</option>
    <option value="3">Bag of Grapes $3</option>
</select>

<select id="option2" onchange="updatePrice()">
    <option value="5">Really good cake</option>
    <option value="15">Super Good Cake</option>
</select>

<div id="price"></div>

如果您需要任何进一步的解释，请告诉我。干杯。

【讨论】：

这是... 非常容易理解，而且比我预期的要简单得多，非常感谢，我永远不会得到这个。但我猜你和菲尔关于使用值而不是数据属性是正确的......再次感谢，非常有帮助。
其实我只是遇到了一个问题...我忘记了我在发送表单数据时依赖于 value 属性...所以我需要 value 属性为value="reallyGoodCake" 怎么会我得到两个值？或者我应该坚持数据属性？
我在 updatePrice 函数中添加了获取所选选项标签内文本的方式。
非常感谢您的回答，但 Wisnu 的回答对我有用，我会坚持一段时间。虽然这可能会在以后派上用场。非常感谢您的回答和编辑。

【解决方案2】：

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

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

【讨论】：

我不明白为什么我的回答被否决了。不过我是根据问题来回答的。
我不确定谁投了反对票，但这是一个赞成票。你确实正确回答了这个问题，但我会坚持 Keegan 的回答，无论如何谢谢你:)。
实际上，您的方法对我来说效果更好...谢谢:)。

【解决方案3】：

为所有需要参与总计算的选择框添加一些独特的类，如mul_ck

//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);
});

【讨论】：