动态填充从另一个下拉列表中选择下拉列表
问题描述：
我的要求是，对于“用餐”下拉列表中的选择，第二个下拉列表“类别”应该动态填充与选择相关的值首先下拉列表。然后根据用餐下拉菜单中选择的内容，列表应该在类别中更改。我写了下面的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>
答
它可以帮助你
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
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;
}
}
居然还有由JavaScript支持的循环方式，即for ... in循环。
A for for ... in循环只遍历可枚举的属性。从诸如Array和Object等内置构造函数创建的对象 具有从Object.prototype继承的不可枚举属性 和 String.prototype，如String的indexOf（）方法或Object的 toString（）方法。该循环将遍历对象本身的所有可枚举对象的属性，以及对象继承其构造函数的原型（更接近 原型链中的对象覆盖原型的属性）的属性。
在每次迭代中，来自对象的一个属性被分配给变量名，并且该循环继续直到该对象的所有属性都被耗尽。
更多Link
答
您可以使用onchange事件，并从第一个下拉使用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>我用size="5"与第二个下拉菜单查看每个选择的实时结果更改。
答
您的代码被追加的原因是因为在用于清除第二个下拉列表的for循环中，不需要更新表达式，因为列表本身正在缩小大小，因此在每次迭代中列表的长度减少，所以你无法清除整个列表。此外，移除功能应该超出条件以避免冗余。`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);
}
}
}
的可能重复[如何清除在下拉框中的所有选项？（http://stackoverflow.com/questions/3364493/how-do-i-clear-all-选项在下拉框） – psycotik
看看我的编辑，你只需要使用switch语句。 –