在不同的下拉菜单中使用数组中的相同值
[英]Use same values from array in different drop down menus
问题描述
我正在制作此酒店预订form ，或者至少是设法使其正常运行。 但是在实现该目标的过程中，我遇到了一些问题。 我有两个不同的drop-down menu's ，我想从同一array检索信息，因为两者都包含相同的信息。
如果我说的话不清楚或笼统，请在抱怨前先询问，我会尽力解释。
编辑：我正在谈论的两个菜单是两个具有“ selectRom”值的菜单。
<html>
<head>
<meta charset="UTF-8">
<style>
</style>
<title>
</title>
</head>
<body>
<div>
<select id="selectNumber">
<option>Velg ett sted</option>
</select>
<input type="date">
<input type="number">
<br><select id="selectRom">
<option>Antall singel rom</option>
</select>
<br> <select id="selectRom">
<option>Antall singel rom</option>
</select>
<br>Skipass:<input type="checkbox" id="skiPass">
<br>Skiutstyr:<input type="checkbox" id="skiUtstyr">
</div>
<script>
var select = document.getElementById("selectNumber");
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);
}
var select = document.getElementById("selectRom");
var options = ["1", "2", "3"];
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);
}
</script>
</body>
</html>
附加问题，与主要问题无关，如果有人知道如何将整个事情变成计算器，并根据输入的信息进行计算，那么如果有人愿意解释或尝试教我，我将非常感激。 JSFIDDLE： https ：//jsfiddle.net/wa1fyLa7/
3 个解决方案
解决方案1
1 已采纳 2016-06-08 09:09:36
https://jsfiddle.net/wa1fyLa7/5/
注意：请不要多次使用相同的ID。
<body>
<div>
<select id="selectNumber">
<option>Velg ett sted</option>
</select>
<input type="date">
<input type="number">
<br><select id="selectRom">
<option>Antall singel rom</option>
</select>
<br> <select id="selectRom2">
<option>Antall singel rom</option>
</select>
<br>Skipass:<input type="checkbox" id="skiPass">
<br>Skiutstyr:<input type="checkbox" id="skiUtstyr">
</div>
<script>
var select = document.getElementById("selectNumber");
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);
}
var select = document.getElementById("selectRom");
var select2 = document.getElementById("selectRom2");
var options = ["1", "2", "3"];
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
var el2 = document.createElement("option");
el2.textContent = opt;
el2.value = opt;
select.appendChild(el);
select2.appendChild(el2);
}
</script>
</body>
解决方案2
0 2016-06-08 09:06:49
https://jsfiddle.net/wa1fyLa7/1/
我将elem更改为class而不是id。
var select = document.getElementsByClassName("selectRom");
console.log(select);
var options = ["1", "2", "3"];
for(var j = 0; j < select.length; j++) {
var elem = select[j];
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
elem.appendChild(el);
}
}
解决方案3
0 2016-06-08 09:24:30
也许你想这样做
<body> <div> <select id="selectNumber"> <option>Velg ett sted</option> </select> <input type="date"> <input type="number"> <br> <select id="selectRom"> <option>Antall singel rom</option> </select> <br> <select id="selectRom2"> <option>Antall singel rom</option> </select> <br>Skipass: <input type="checkbox" id="skiPass"> <br>Skiutstyr: <input type="checkbox" id="skiUtstyr"> </div> <script> var select = document.getElementById("selectNumber"); 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); } add("selectRom"); add("selectRom2"); function add(idN) { var select = document.getElementById(idN); var options = ["1", "2", "3"]; 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); } } //var select = document.getElementById("selectRom"); //var options = ["1", "2", "3"]; //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); //} </script> </body>
显示和值取决于具有不同值的下拉菜单的选项
[英]display and value depending options of drop down menus with different values
如何在同一个父菜单上有两个不同的下拉菜单？
[英]How can I have two different drop down menus depend on the same parent menu?
仅当从不同的下拉菜单中选择了多个选项时，如何触发按钮出现
[英]How to trigger a button to appear only if multiple options from different drop-down menus have been selected
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.