CODEWITHSUNDEEP
javascripthtmldropdown
ImNewToThis
ImNewToThis

Reputation: 15

Drop down menu with array, define value of each option

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/

Upvotes: 0

Views: 80

Answers (1)

phreakv6
phreakv6

Reputation: 2165

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

Upvotes: 1

Related Questions