通過選擇另一個下拉值動態填充下拉列表

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：演示

的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循環僅迭代可枚舉的屬性。 從內置構造函數（如Array和Object）創建的對象繼承了Object.prototype和String.prototype的不可枚舉的屬性，例如String的indexOf（）方法或Object的toString（）方法。 循環將遍歷對象本身的所有可枚舉屬性，以及對象從其構造函數的原型繼承的那些屬性（在原型鏈中更靠近對象的屬性將覆蓋原型的屬性）。

在每次迭代中，將來自對象的一個​​屬性分配給變量名，並且此循環持續進行到對象的所有屬性用盡為止。

有關更多鏈接

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循環中，不需要更新表達式，因為列表本身會減小大小，因此在每次迭代中列表的長度都會減小，因此您無法清除整個列表。 同樣，刪除功能應在if條件之外，以避免冗余。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);
    }
}

}