How do you add data to an option tag?

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.

@Phil Shouldn't that be reserved for the name of the item? Also it's not specific, so if I want to add another `value` or data attribute I might get confused in the future. — Kenneth Rhodes, Mar 04 '18 at 02:10
Possible duplicate of [On select change, get data attribute value](https://stackoverflow.com/questions/8345666/on-select-change-get-data-attribute-value) — Heretic Monkey, Mar 04 '18 at 20:43
Your question is literally, "So how do I get JavaScript to grab the data value of that option that the user selects?" That question's answers answer that question... — Heretic Monkey, Mar 05 '18 at 16:31

Keegan Teetaert · Answer 1 · 2018-03-04T20:18:27.933

2

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.

edited Mar 04 '18 at 20:18

answered Mar 04 '18 at 02:26

Keegan Teetaert

643
6
22

This was... Very understandable and a lot more simple than I expected, thank you a lot, I would never have gotten to this. But I guess you and Phil are right about using value instead of a data attribute... Thanks again, very helpful. – Kenneth Rhodes Mar 04 '18 at 13:43
Actually, I just ran into a problem... I forgot I rely on the value attribute for when I send the form data... So I need the value attribute to be `value="reallyGoodCake"` how would I get two values? Or maybe I should stick to data attributes? – Kenneth Rhodes Mar 04 '18 at 13:51
I added to the updatePrice function the way in which you would grab the text inside the selected option tag. – Keegan Teetaert Mar 04 '18 at 20:19
Thank you a lot for your answer but Wisnu's answer worked for me and I'll be sticking with it for a little. Though this may come in handy later. Thank you so much for the answer and for the edit. – Kenneth Rhodes Mar 05 '18 at 14:41

score 0 · Accepted Answer · answered Mar 04 '18 at 02:29

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>

I don't get it why my answer got downvoted. I'm answering based on the question though. — wisn, Mar 04 '18 at 02:58
I'm not sure who downvoted but here's an upvote. You did answer the question correctly but I will stick to Keegan's answer, thank you anyways :). — Kenneth Rhodes, Mar 04 '18 at 13:46
Actually, your method is working better for me... Thank you :). — Kenneth Rhodes, Mar 04 '18 at 14:15

score -1 · Answer 3 · answered Mar 04 '18 at 02:30

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

How do you add data to an option tag?

3 Answers3