移入ドロップダウンドロップダウンAの選択にB、及び<strong>ドロップダウン-C</strong>を私は<strong>ドロップダウン・</strong>のセクションに<strong>ドロップダウン-B</strong>を埋めるためにしようとしています

Question

ドロップダウンBの選択にドロップダウンCを移入し、塗りつぶしDropdown-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>

• 私は "果物"、そして、リストB

Bなどのオプションを使用してドロップダウンを選択した場合：[ "りんご"、 "オレンジ"、 "ブドウ "]

は、dropd自分のB.
- 私は "りんご" とドロップダウンBを選択した場合は、ドロップダウンCは、リストD

D移入する必要があります：[ "グリーンアップル"、 "レッドアップル"]

フィドルhttp://jsfiddle.net/k148pk76/171/
私は、ドロップダウンAに基づいてドロップダウンリストBを埋めることができますが、ドロップダウンB.
の選択にドロップダウンCを埋めることができません助けてください！

Answer 1

3番目のドロップダウンにchangecat2（）メソッドを追加し、3番目のドロップダウンに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>