填充下拉B，並在下拉B的選擇

-1

我試圖填補下拉-B上下拉-A的部分填充下拉C，並填寫下拉-C關於選擇Dropdown-B。填充下拉B，並在下拉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/
我能夠下拉列表中選擇的基礎上，填寫下拉列表B，但無法填補下拉C對下拉B.
的選擇請幫忙！

來源

2017-07-16 mayank bisht

您可以創建一個代碼段，所以我們可以用工作版本 –

@DarrenSweeney調試：上面的代碼片斷處於工作狀態。 –

小提琴：http://jsfiddle.net/k148pk76/171/ –

爲第三個下拉列表添加了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>

來源

2017-07-16 08:34:03

填充下拉B，並在下拉B的選擇

回答

相關問題