Question

我想将数据值添加到select元素中的option标签。例如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不同，因为我的问题更具体，需要不同的方法。即使这是具体的，它可以通过它得到的答案帮助开发人员。因此，它不是重复，而是比另一个更具体的问题。虽然这个问题有一个更简单的答案，如果开发人员知道如何可以插入。

Answer 1

以下是与您的描述相符的一些代码。一些注意事项：使用值属性可以直接访问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>

如果您需要进一步说明，请与我们联系。欢呼声。

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

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

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

3 个答案: