Javascript 从另一个下拉值的选择中动态填充下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30232146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically Populating Drop down list from selection of another drop down value
提问by Zim
My requirement is that for a selection in a 'meal' drop down list, a second drop down list 'category' should get dynamically populated with values related to the selection in first drop down list. Then depending on what is selected in the meal dropdown, the list should change in category. I have written the following Javascript function but the output I'm getting is not freshly populating the 2nd dropdown. On change of a selection, the new list is just getting appended to the old list.
我的要求是，对于“膳食”下拉列表中的选择，第二个下拉列表“类别”应该动态填充与第一个下拉列表中的选择相关的值。然后根据在膳食下拉菜单中选择的内容，列表应在类别中发生变化。我已经编写了以下 Javascript 函数，但我得到的输出不是新鲜填充第二个下拉列表。更改选择后，新列表将附加到旧列表中。
function changecat() {
var selectHTML = "";
var A = ["Soup", "Juice", "Tea", "Others"];
var B = ["Soup", "Juice", "Water", "Others"];
var C = ["Soup", "Juice", "Coffee", "Tea", "Others"];
if (document.getElementById("meal").value == "A") {
var select = document.getElementById('category').options.length;
for (var i = 0; i < select; i++) {
document.getElementById('category').options.remove(i);
}
for (var i = 0; i < A.length; i++) {
var newSelect = document.createElement('option');
selectHTML = "<option value='" + A[i] + "'>" + A[i] + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('category').add(newSelect);
}
}
else if (document.getElementById("meal").value == "B") {
var select = document.getElementById('category').options.length;
for (var i = 0; i < select; i++) {
document.getElementById('category').options.remove(i);
}
for (var i = 0; i < B.length; i++) {
var newSelect = document.createElement('option');
selectHTML = "<option value='" + B[i] + "'>" + B[i] + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('category').add(newSelect);
}
}
else if (document.getElementById("project").value == "C") {
var select = document.getElementById('category').options.length;
for (var i = 0; i < select; i++) {
document.getElementById('category').options.remove(i);
}
for (var i = 0; i < C.length; i++) {
var newSelect = document.createElement('option');
selectHTML = "<option value='" + C[i] + "'>" + C[i] + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('category').add(newSelect);
}
}
}
HTML-
<select name="meal" id="meal" onchange="changecat();">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="category" id="category">
<option value="">Select</option>
</select>
回答by divy3993
It might help you
它可能会帮助你
HTML
HTML
<select name="meal" id="meal" onChange="changecat(this.value);">
<option value="" disabled selected>Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="category" id="category">
<option value="" disabled selected>Select</option>
</select>
JS
JS
var mealsByCategory = {
A: ["Soup", "Juice", "Tea", "Others"],
B: ["Soup", "Juice", "Water", "Others"],
C: ["Soup", "Juice", "Coffee", "Tea", "Others"]
}
function changecat(value) {
if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
else {
var catOptions = "";
for (categoryId in mealsByCategory[value]) {
catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
}
document.getElementById("category").innerHTML = catOptions;
}
}
Actually there is kind of loop supported by JavaScript i.e. for...in loop.
实际上，JavaScript 支持某种循环，即 for...in 循环。
A for...in loop only iterates over enumerable properties. Objects created from built–in constructors like Array and Object have inherited non–enumerable properties from Object.prototype and String.prototype, such as String's indexOf() method or Object's toString() method. The loop will iterate over all enumerable properties of the object itself and those the object inherits from its constructor's prototype (properties closer to the object in the prototype chain override prototypes' properties).
for...in 循环只迭代可枚举的属性。从内置构造函数（如 Array 和 Object）创建的对象从 Object.prototype 和 String.prototype 继承了不可枚举的属性，例如 String 的 indexOf() 方法或 Object 的 toString() 方法。循环将迭代对象本身的所有可枚举属性以及对象从其构造函数的原型继承的属性（更接近原型链中对象的属性覆盖原型的属性）。
In each iteration one property from object is assigned to variable-name and this loop continues till all the properties of the object are exhausted.
在每次迭代中，对象的一个属性被分配给变量名，这个循环一直持续到对象的所有属性都用完为止。
For more Link
更多链接
回答by cн?dk
You can use onchangeevent and use a switch statement with the selected value from the first dropdown and according to it append the options to the second list:
您可以使用onchangeevent 并使用 switch 语句和从第一个下拉列表中选择的值，并根据它将选项附加到第二个列表：
var A= ["Soup", "Juice", "Tea","Others"];
var B= ["Soup","Juice","Water", "Others"];
var C= ["Soup","Juice","Coffee", "Tea","Others"];
var changeCat = function changeCat(firstList) {
var newSel = document.getElementById("category");
//if you want to remove this default option use newSel.innerHTML=""
newSel.innerHTML="<option value=\"\">Select</option>"; // to reset the second list everytime
var opt;
//test according to the selected value
switch (firstList.options[firstList.selectedIndex].value) {
case "A":
for (var i=0; len=A.length, i<len; i++) {
opt = document.createElement("option");
opt.value = A[i];
opt.text = A[i];
newSel.appendChild(opt);
}
break;
case "B":
for (var i=0; len=B.length, i<len; i++) {
opt = document.createElement("option");
opt.value = B[i];
opt.text = B[i];
newSel.appendChild(opt);
}
break;
case "C":
for (var i=0; len=C.length, i<len; i++) {
opt = document.createElement("option");
opt.value = C[i];
opt.text = C[i];
newSel.appendChild(opt);
}
break;
}
}<select name="meal" id="meal" onchange="changeCat(this);">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="category" id="category" size="5">
<option value="">Select</option>
</select>I used size="5"with the second dropdown to see the live result changes for each selection.
我使用size="5"第二个下拉菜单来查看每个选择的实时结果变化。
回答by aditya kansal
The reason why your code gets appended is because in the for loop for clearing the second drop down list, the update expression is not required as the list is itself being reduced in size and so in every iteration the length of the list decreases, and so you are unable to clear the whole list. Also the removal function should be outside the if conditions to avoid redundancy.`function changecat() { var selectHTML = "";
附加您的代码的原因是因为在清除第二个下拉列表的 for 循环中，不需要更新表达式，因为列表本身的大小正在减小，因此在每次迭代中，列表的长度都会减少，因此您无法清除整个列表。移除函数也应该在 if 条件之外以避免冗余。`function changecat() { var selectHTML = "";
var A = ["Soup", "Juice", "Tea", "Others"];
var B = ["Soup", "Juice", "Water", "Others"];
var C = ["Soup", "Juice", "Coffee", "Tea", "Others"];
var select = document.getElementById('category').options.length;
for (var i = 0; i < select; ) {
document.getElementById('category').options.remove(i);
}
if (document.getElementById("meal").value == "A") {
for (var i = 0; i < A.length; i++) {
var newSelect = document.createElement('option');
selectHTML = "<option value='" + A[i] + "'>" + A[i] + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('category').add(newSelect);
}
}
else if (document.getElementById("meal").value == "B") {
for (var i = 0; i < B.length; i++) {
var newSelect = document.createElement('option');
selectHTML = "<option value='" + B[i] + "'>" + B[i] + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('category').add(newSelect);
}
}
else if (document.getElementById("project").value == "C") {
for (var i = 0; i < C.length; i++) {
var newSelect = document.createElement('option');
selectHTML = "<option value='" + C[i] + "'>" + C[i] + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('category').add(newSelect);
}
}
}
}
