希望这可以帮助你。
JSFiddle:演示
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 循环),在这种情况下它会帮助你
for...in 循环仅迭代可枚举属性。对象
从内置构造函数(如数组和对象)创建的
从 Object.prototype 继承了不可枚举属性并且
String.prototype,例如String的indexOf()方法或Object的
toString() 方法。循环将迭代所有可枚举的
对象本身的属性以及对象从其继承的属性
构造函数的原型(更接近对象的属性
原型链覆盖原型的属性)。
在每次迭代中,对象的一个属性被分配给变量名,并且此循环继续,直到对象的所有属性都用尽为止。
了解更多Link