javascript - 带数组的下拉菜单，定义每个选项的值

Question

你好，Stackoverflow!

今天我尝试用数组制作一个下拉菜单。它确实有效，但此后发生的问题是定义由数组打印的值。

到目前为止，这是有关下拉菜单的代码。

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

但是我想给每个选项一个值，稍后我可以将其应用到计算器中，因为我想提供预订服务，其中每个选项都有不同的值，并且计算器从当前选定的选项中检索信息，设置价格取决于所选选项。

如果有任何不清楚或太不详细的内容，请询问，我会尽力解释。

JSFIDDLE https://jsfiddle.net/a3pe6zcu/

Answer 1

您正在寻找这样的东西吗？我已更新您的数据以保存价格和地点名称。现在，选择将文本作为地点，将价格作为值。 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);
}