在选择下拉列表A时填充下拉列表B，并在选择下拉列表B上填充下拉列表C.

Question

我正在尝试在 Dropdown-A 部分填写 Dropdown-B ，并在选择<上填写 Dropdown-C 强>下拉-B

var mealsByCategory = {

  A: ["fruits", "vegetable", "others"],
  B: ["Apples", "orange", "Grapes"],
  C: ["Carrot", "Ladyfinger", "onions"],
  D: ["Green Apple", "Red Apple"]
}

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;
  }
}

<select name="main" id="main" 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" onChange="changecat2(this.value);">
    <option value="" disabled selected>Select</option>

</select>
<select name="subcategory" id="subcategory">
    <option value="" disabled selected>Select</option>

</select>

• 如果我选择带有A选项的下拉菜单作为“水果”，则列出B

  

B：[“苹果”，“橙子”，“葡萄”]

应填入下拉列表B.
  - 如果我选择带有“苹果”的下拉B，则下拉列表C应填入列表D

  

D：[“绿苹果”，“红苹果”]

小提琴 http://jsfiddle.net/k148pk76/171/
我可以在下拉列表A的基础上填写下拉列表B，但无法在选择下拉列表B时填写下拉列表C. 请帮忙！

Answer 1

为第三个下拉列表添加了changecat2（）方法，并为第三个下拉列表添加了更新的changecat（）方法，只需尝试以下代码。

var mealsByCategory = {
  Fruits: ["Apples", "Orange", "Grapes"],
  Vegetables: ["Carrot", "Ladyfinger", "onions"],
  Apples: ["Green Apple", "Red Apple"],
  Orange: ["Green Orange", "Orange"],
  Grapes: ["Green Grapes", "Black Grapes"]
}

function changecat(value) {
  if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
  else {
    var catOptions = "";
    for (var categoryId in mealsByCategory[value]) {
      catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
    }
    document.getElementById("category").innerHTML = catOptions;
debugger;
    var subCatOptions = "";
    var selectedInCategory = document.getElementById('category').selectedOptions[0].textContent;
    for (var subCategoryId in mealsByCategory[selectedInCategory]) {
      subCatOptions += "<option>" + mealsByCategory[selectedInCategory][subCategoryId] + "</option>";
    }
    document.getElementById("subcategory").innerHTML = subCatOptions;
  }
}

function changecat2(value) {
  debugger;
  if (value.length == 0) document.getElementById("subcategory").innerHTML = "<option></option>";
  else {
    var subCatOptions = "";
    for (var subCategoryId in mealsByCategory[value]) {
      subCatOptions += "<option>" + mealsByCategory[value][subCategoryId] + "</option>";
    }
    document.getElementById("subcategory").innerHTML = subCatOptions;
  }
}

<select name="main" id="main" onChange="changecat(this.value);">
    <option value="" disabled selected>Select</option>
    <option value="Fruits">Fruits</option>
    <option value="Vegetables">Vegetables</option>
    <option value="Others">Others</option>
</select>
<select name="category" id="category" onChange="changecat2(this.value);">
    <option value="" disabled selected>Select</option>

</select>
<select name="subcategory" id="subcategory">
    <option value="" disabled selected>Select</option>

</select>