如何在 HTML Javascript 中填充第三個下拉列表？

Question

我有一個問題，不知道如何填充或創建將在第二個框中顯示結果的第三個框。 我要做的是選擇品牌，然后選擇型號，然后在第三個框上，它會顯示他們的型號。

<select name="device" id="device" onchange="changecat(this.value);">
  <option value="" disabled selected>Select</option>
  <option value="A">Apple</option>
  <option value="S">Samsung</option>
  <option value="L">LG</option>
  <option value="G">Google</option>
  </select>
  <select name="category" id="category">
    <option value="" disabled selected>Select</option>
  </select>

這是另一個代碼

var brandByCategory = {
  A: ["iPhone", "iPhone 3G", "iPhone 3GS", "iPhone 4"],
  S: ["Galaxy S3", "Galaxy S4", "Galaxy S5", "Galaxy S6"],
  L: ["G3", "G4", "G5", "G6", "G7"],
  G: ["Pixel", "Pixel XL", "Pixel 2", "Pixel 2 XL", "Pixel 3", "Pixel 3 XL", "Pixel 3A", "Pixel 3A XL", "Pixel 4", "Pixel 4 XL"]

}

    function changecat(value) {
        if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
        else {
            var catOptions = "";
            for (categoryId in brandByCategory[value]) {
                catOptions += "<option>" + brandByCategory[value][categoryId] + "</option>";
            }
            document.getElementById("category").innerHTML = catOptions;
        }
    }

Answer 1

如果您想用設備保存型號，我建議您使用對象數組並將型號作為值添加到第二個下拉列表中，如下所示。

從第二個下拉菜單中，您可以獲得該值，然后將其顯示在您想要的任何位置。

 var brandByCategory = { A: [{ name: "iPhone", model: "10" }, { name: "iPhone 3G", model: "3G" }], S: [{ name: "Galaxy S3", model: "S3" }, { name: "Galaxy S4", model: "S4" }] } function changecat(value) { if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>"; else { var catOptions = ""; for (categoryId in brandByCategory[value]) { catOptions += `<option value = "${brandByCategory[value][categoryId].model}">${brandByCategory[value][categoryId].name}</option>`; } document.getElementById("category").innerHTML = catOptions; } } var input = document.getElementById("modelNumber") function populateValue(val) { input.value = val; }

 <select name="device" id="device" onchange="changecat(this.value);"> <option value="" disabled selected>Select</option> <option value="A">Apple</option> <option value="S">Samsung</option> </select> <select name="category" id="category" onchange="populateValue(this.value);"> <option value="" disabled selected>Select</option> </select> <input type="text" id="modelNumber" />