Drop down menu with array, define value of each option

Question

Hello there Stackoverflow!

Today I tried making a drop-down menu with an array. It did work, but the problem that has taken place after this, is to define the values printed by the array.

As of now, this is the code regarding the drop-down menu.

HTML

<select id="selectDestinasjon">
    <option>Velg ett sted</option>
</select>

Javascript

var select = document.getElementById("selectDestinasjon");
var options = ["Konsberg", "Trysil", "Beitostølen"];
for (var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);
}

But I want to give each option a value, that I can later impliment into a calculator, because I want to make a booking service where each of these options has different value and the calculator retrieve info from current selected option, setting a price depending on selected option.

If anything seem unclear or too little detailed, please ask and I'll do my best to explain.

JSFIDDLE https://jsfiddle.net/a3pe6zcu/

I mean a price specified value. That each individual place got a dollar price, but implimented through a array — ImNewToThis
– ImNewToThis, Commented Jun 8, 2016 at 10:49

phreakv6 · Accepted Answer · 2016-06-08 10:54:42Z

1

Are you looking for something like this? I have updated your data to hold the price and the name of the place. Now the select has the text as the place and the price as the value. Updated fiddle

var select = document.getElementById("selectDestinasjon");
var options = [{"place": "Konsberg","price":"$20"}, {"place":"Trysil","price":"$30"}, {"place":"Beitostølen","price":"$40"}];
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt.place;
el.value = opt.price;
select.appendChild(el);
}

answered Jun 8, 2016 at 10:54

phreakv6

2,1651 gold badge11 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

ImNewToThis Over a year ago

I think this is very close to exactly what I am aming for, but I just have to do some asking to understand the code(hence my name). The different values you have set like, value = opt.price, is that what ill use to calculate selected price?

phreakv6 Over a year ago

Sure not a problem. The options array has elements which are hashes ({'name':'value'} pairs). Each element corresponds to data (place, price) for particular place. The for loop you had is exactly the same as what I have. But within the for loop, you were getting the names of the places but my opt is going to be the hash object. To access hash, am using opt.place and opt.price. Hope that makes sense. The rest is what you already had. Only these 3 lines have been changed.

ImNewToThis Over a year ago

I think I understand, but just incase. IF you got extra time on your hands, could you make an example targeting price, just to see how to do it?

phreakv6 Over a year ago

You should use onChange on the select and get the value of the select in the callback function. I suggest you use a library like jQuery where you can do such stuff easily. Something like this $('#selectDestinasjon').on('change',function() { var target_price = $(this).val(); alert(target_price) }); Please accept this answer if it helped you and upvote. thanks!

ImNewToThis Over a year ago

Done, too little rep to upvote, but accepted. I understand if you dont want to do this, but could you do a updated fiddle with an example?

|

Collectives™ on Stack Overflow

Drop down menu with array, define value of each option

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related