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

Question

I'd like to add a data value to an option tag in a select element. For example data-price but my problem is that I have multiple select tags. So how do I get JavaScript to grab the data value of that option that the user selects?

How I want it to work:
Select element #1 contains:

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

Select element #2 contains:

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

Then I'm honestly not sure what to do in the JS... But I want it to grab what the user selected, get the data-price then calculate the total (just by adding select1 + select2).

EDIT : My answer is different than this question because my question is more specific and requires different methods. Even though this is specific it could help a developer in the future by the answers it gets. Therefore it is not a duplicate but a more specific question than the other. Though that question has a simpler answer that could be plugged in if the developer knows how to.

Answer 1

Here is some code matching your discription. A few notes: Use the value attribute to get direct access to the option value from the select element. The unary operator (+) converts the two values from strings to a operatable numbers. The third div is just to show the output total value.

 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>

Let me know if you need any further explanation. Cheers.

Answer 2

This is a bit tricky. You need to give an identifier so our code won't get confused.

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

First, add a global variable to storing current price. Second, store the identifier and the price value. Finally, manipulate the current price.

<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

Add some unique class to all selectbox whos valued need to be involved in total calculation like 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);
});