動態填充從另一個下拉列表中選擇下拉列表

Question

我的要求是，對於「用餐」下拉列表中的選擇，第二個下拉列表「類別」應該動態填充與選擇相關的值首先下拉列表。然後根據用餐下拉菜單中選擇的內容，列表應該在類別中更改。我寫了下面的Javascript函數，但是我得到的輸出並不是新鮮填充第二個下拉列表。在選擇更改時，新列表正在追加到舊列表中。

function changecat() { 
    var selectHTML = ""; 

    var A = ["Soup", "Juice", "Tea", "Others"]; 
    var B = ["Soup", "Juice", "Water", "Others"]; 
    var C = ["Soup", "Juice", "Coffee", "Tea", "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> 

Answer 1

它可以幫助你

JSFiddle : DEMO

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循環。

A for for ... in循環只遍歷可枚舉的屬性。從諸如Array和Object等內置構造函數創建的對象 具有從Object.prototype繼承的不可枚舉屬性 和 String.prototype，如String的indexOf（）方法或Object的 toString（）方法。該循環將遍歷對象本身的所有可枚舉對象的屬性，以及對象繼承其構造函數的原型（更接近 原型鏈中的對象覆蓋原型的屬性）的屬性。

在每次迭代中，來自對象的一個​​屬性被分配給變量名，並且該循環繼續直到該對象的所有屬性都被耗盡。

更多Link

Answer 2

您可以使用onchange事件，並從第一個下拉使用switch語句選擇的值，並根據它的選項追加到第二個列表：

var A= ["Soup", "Juice", "Tea","Others"]; 
 
    var B= ["Soup","Juice","Water", "Others"]; 
 
    var C= ["Soup","Juice","Coffee", "Tea","Others"]; 
 

 
var changeCat = function changeCat(firstList) { 
 
    var newSel = document.getElementById("category"); 
 
    //if you want to remove this default option use newSel.innerHTML="" 
 
    newSel.innerHTML="<option value=\"\">Select</option>"; // to reset the second list everytime 
 
    var opt; 
 

 
     //test according to the selected value 
 
     switch (firstList.options[firstList.selectedIndex].value) { 
 
      case "A": 
 
       for (var i=0; len=A.length, i<len; i++) { 
 
        opt = document.createElement("option"); 
 
        opt.value = A[i]; 
 
        opt.text = A[i]; 
 
        newSel.appendChild(opt); 
 
       } 
 
       break; 
 
      case "B": 
 
       for (var i=0; len=B.length, i<len; i++) { 
 
        opt = document.createElement("option"); 
 
        opt.value = B[i]; 
 
        opt.text = B[i]; 
 
        newSel.appendChild(opt); 
 
       } 
 
       break; 
 
      case "C": 
 
       for (var i=0; len=C.length, i<len; i++) { 
 
        opt = document.createElement("option"); 
 
        opt.value = C[i]; 
 
        opt.text = C[i]; 
 
        newSel.appendChild(opt); 
 
       } 
 
       break; 
 
     } 
 

 
}

<select name="meal" id="meal" onchange="changeCat(this);"> 
 
    <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" size="5"> 
 
    <option value="">Select</option> 
 
</select>

我用size="5"與第二個下拉菜單查看每個選擇的實時結果更改。

Answer 3

您的代碼被追加的原因是因爲在用於清除第二個下拉列表的for循環中，不需要更新表達式，因爲列表本身正在縮小大小，因此在每次迭代中列表的長度減少，所以你無法清除整個列表。此外，移除功能應該超出條件以避免冗餘。`function changecat（）{ var selectHTML =「」;

var A = ["Soup", "Juice", "Tea", "Others"]; 
var B = ["Soup", "Juice", "Water", "Others"]; 
var C = ["Soup", "Juice", "Coffee", "Tea", "Others"]; 
var select = document.getElementById('category').options.length; 

    for (var i = 0; i < select;) { 
     document.getElementById('category').options.remove(i); 
    } 

if (document.getElementById("meal").value == "A") { 


    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") { 

    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") { 

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

}