我的要求是,对于“用餐”下拉列表中的选择,第二个下拉列表“类别”应该在第一个下拉列表中动态填充与选择相关的值.然后,根据用餐下拉菜单中选择的内容,列表应在类别中更改.我已经编写了以下
Javascript函数,但我得到的输出并没有新填充第二个下拉列表.在更改选择时,新列表将被附加到旧列表.
function changecat() {
var selectHTML = "";
var A = ["Soup","Juice","Tea","Others"];
var B = ["Soup","Water","Others"];
var C = ["Soup","Coffee","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","Others"],B: ["Soup",C: ["Soup","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…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).
在每次迭代中,将对象中的一个属性分配给变量名,并且此循环继续,直到对象的所有属性都用完为止.
更多Link
