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

问题描述 投票:2回答:3

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

javascript html
3个回答
0
投票

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

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

2
投票

这是一些与您的描述相符的代码。一些注意事项:使用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>

如果您需要进一步解释,请与我们联系。干杯。


-1
投票

为需要参与总计算的所有选择框添加一些唯一的类,如覆盖物

//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);
});
© www.soinside.com 2019 - 2024. All rights reserved.