如何根據一個選擇創建多個動態選擇框？
[英]How can I create more than one dynamic select box dependent on one selection?
問題描述
我正在嘗試創建具有多個組合框選擇的表單。 我希望第一個組合框的選擇會影響以下框中的選擇。 我只能讓一對工作。 我復制了函數並更改了ID，以使其能反映在傳遞的參數中，但它仍然僅適用於一對。 下面的代碼是我從本教程開始的內容，我想添加其他框，例如，雪佛蘭的顏色為白色，黑紅色，閃避的顏色為藍色，綠色和黑色。 我如何使第一個盒子依賴於其他盒子？
我嘗試復制函數和html行，並將id和名稱更改為slct1，slct2，slct3。 當添加populate函數時，我將s1，s3作為新參數傳遞。 我還嘗試將所有功能都包含在一個函數中，並添加了要傳遞的其他參數。
<!DOCTYPE html>
<html>
<head>
<script>
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "Chevy"){
var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
} else if(s1.value == "Dodge"){
var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
} else if(s1.value == "Ford"){
var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
</head>
<body>
<h2>Choose Your Car</h2>
<hr />
Choose Car Make:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
<option value=""></option>
<option value="Chevy">Chevy</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
<hr />
Choose Car Model:
<select id="slct2" name="slct2"></select>
<hr />
</body>
</html>
我的預期結果是，用戶選擇了一輛汽車（雪佛蘭，道奇，福特等），然后在其他方框中填充了基於該選擇，型號和顏色的選項。 我只能使主框和第一個從屬框起作用。
3 個解決方案
解決方案1
1 已采納 2019-07-24 15:56:37
這是一個示例，說明如何將另一個<select>添加到已建立的模式。 可能有更清潔的方法可以執行此操作，但是只要遵循本教程，此方法就可以使用。
function populate(s1) { var s1 = document.getElementById(s1); var s2 = document.getElementById('model'); var s3 = document.getElementById('color'); s2.innerHTML = ""; s3.innerHTML = ""; if (s1.value == "Chevy") { var modelArray = ["|", "camaro|Camaro", "corvette|Corvette", "impala|Impala"]; var colorArray = ["|", "red|Red", "green|Green", "blue|Blue"]; } else if (s1.value == "Dodge") { var modelArray = ["|", "avenger|Avenger", "challenger|Challenger", "charger|Charger"]; var colorArray = ["|", "red|Red", "green|Green", "blue|Blue"]; } else if (s1.value == "Ford") { var modelArray = ["|", "mustang|Mustang", "shelby|Shelby"]; var colorArray = ["|", "red|Red", "green|Green", "blue|Blue"]; } for (var option in modelArray) { var pair = modelArray[option].split("|"); var newOption = document.createElement("option"); newOption.value = pair[0]; newOption.innerHTML = pair[1]; s2.options.add(newOption); } for (var option in colorArray) { var pair = colorArray[option].split("|"); var newOption = document.createElement("option"); newOption.value = pair[0]; newOption.innerHTML = pair[1]; s3.options.add(newOption); } }
<h2>Choose Your Car</h2> <hr /> Choose Car Make: <select id="slct1" name="slct1" onchange="populate(this.id)"> <option value=""></option> <option value="Chevy">Chevy</option> <option value="Dodge">Dodge</option> <option value="Ford">Ford</option> </select> <hr /> Choose Car Model: <select id="model" name="slct2"></select> <hr /> Choose Car Color: <select id="color" name="slot3"></select> <hr />
如果您有任何疑問，請告訴我！
解決方案2
0 2019-07-24 17:14:30
在這里，我只為第一個選項添加紅色，白色和黑色的代碼。 其他選項沒有顏色
enter code here
<!DOCTYPE html>
<html>
<head>
<script>
function populate(s1,s2,slcolor){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
slcolor.innerHTML= "";
if(s1.value == "Chevy"){
var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
var optionColor = ["|","red|Red","white|White","black|Black"];
} else if(s1.value == "Dodge"){
var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
var optionColor = ["|"];
} else if(s1.value == "Ford"){
var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
var optionColor = ["|"];
}
for(var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
for(var option in optionArray) {
var pair = optionColor[option].split("|");
var newOptionC = document.createElement("option");
newOptionC.value = pair[0];
newOptionC.innerHTML = pair[1];
slcolor.options.add(newOptionC);
}
}
</script>
</head>
<body>
<h2>Choose Your Car</h2>
<hr />
Choose Car Make:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2',slcolor)">
<option value=""></option>
<option value="Chevy">Chevy</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
<hr />
Choose Car Model:
<select id="slct2" name="slct2"></select>
<hr />
Choose Color:
<select id="slcolor" name="slcolor"></select>
<hr />
</body>
</html>
解決方案3
0 2019-07-24 19:48:48
我對您的代碼做了一些更改：
一次獲取參考
選擇始終是相同的，只是選項發生了變化，因此我將選擇移到了另一個作用域。
var form = document.querySelector('form');
var brandSelect = form.querySelector('#brand');
var modelSelect = form.querySelector('#model');
var colorSelect = form.querySelector('#color');
克隆元素
克隆對象始終向DOM請求創建新對象。
var optionElement = document.createElement('option');
...
var optionModel = optionElement.cloneNode(true);
保護范圍
將代碼包裝在自動調用的函數中，以避免將變量和函數放在全局范圍內。 這樣可以避免庫之間的某些可能沖突。
(function(){...})();
創建數據參考
數據引用更具可讀性，如果出了問題也很容易調試。
var brandOptions = {
Chevy: {
model: ['camaro', 'corvette', 'impala'],
color: ['white', 'black', 'red'],
},
Dodge: {
model: ['avenger', 'challenger', 'charger'],
color: ['blue', 'green', 'black'],
},
Ford: {
model: ['camaro', 'corvette', 'impala'],
color: ['red', 'green', 'blue'],
},
}
完整的例子
(function(){ var form = document.querySelector('form'); var brandSelect = form.querySelector('#brand'); var modelSelect = form.querySelector('#model'); var colorSelect = form.querySelector('#color'); var optionElement = document.createElement('option'); var brandOptions = { Chevy: { model: ['camaro', 'corvette', 'impala'], color: ['white', 'black', 'red'], }, Dodge: { model: ['avenger', 'challenger', 'charger'], color: ['blue', 'green', 'black'], }, Ford: { model: ['camaro', 'corvette', 'impala'], color: ['red', 'green', 'blue'], }, }; function addOptionIntheSelect(options) { modelSelect.innerHTML = ''; options.model.forEach(function(model) { var optionModel = optionElement.cloneNode(true); optionModel.value = model; optionModel.innerHTML = model; modelSelect.appendChild(optionModel); }); colorSelect.innerHTML = ''; options.color.forEach(function(color) { var optionColor = optionElement.cloneNode(true); optionColor.value = color; optionColor.innerHTML = color; colorSelect.appendChild(optionColor); }); } function onSelectChange(event) { addOptionIntheSelect(brandOptions[event.target.value]); } brandSelect.onchange = onSelectChange; })();
.container { width: 100%; max-width: 300px; margin: 0 auto; } label, select { display: block; width: 100%; box-sizing: borde-box; } select { text-transform: Capitalize; } label { margin-bottom: 8px; } form > div { padding: 8px 0; }
<div class="container"> <form> <div> <label for="">Choose Car Make:</label> <select id="brand" name="brand"> <option value=""></option> <option value="Chevy">Chevy</option> <option value="Dodge">Dodge</option> <option value="Ford">Ford</option> </select> </div> <div> <label for="">Choose Car Model:</label> <select id="model" name="slct2"></select> </div> <div> <label for="">Choose Car Color:</label> <select id="color" name="slot3"></select> </div> </form> </div>
jQuery Selector：當我有多個時，如何指定一個選擇菜單？
[英]jQuery Selector: how can I specify one select menu when I have more than one?
我想將三個相關選擇框之一添加到我的添加動態字段中（循環中）？
[英]I want to get one of three dependent select box in to my add dynamic field(in loop)?
如何使用一個JavaScript函數填充多個選擇元素？
[英]How can I populate more than one select elements with one javascript function?
當值有多個單詞時，如何根據先前的 select 選擇更改 select 的值
[英]How to change the value of a select based on a previous select selection when the value has more than one word
如何在 select2 數據行中的一行中顯示多個空格字符？
[英]How can I show more than one white space character in a row in a select2 data row?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.