javascript - 如何在 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;
        }
    }

标签： javascripthtml

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" />