自填充相关选择框

Question

希望这对你们来说是一个简单的问题，我已经花了好几天来弄弄这个。我有一个HTML页面，该页面允许用户选择汽车制造商，完成后，从属选择框将填充该特定制造商的选项。

这在控制台日志中非常有效，我可以获得每个汽车制造商的所有选项，但是我在实际HTML页面中获得的只是每个制造商的LAST模型。我尝试了许多不同的循环结构以及以多种方式编写/附加到HTML的方法，但均未成功。我到处寻找可以工作的JS，并且大多数在控制台日志中似乎运行良好。应该如何填充HTML选择框？提前感谢你的帮助。干杯，瑞克

CONSOLE.LOG

<option value="H8">Roadster</option>
<option value="I1">Model S</option>
<option value="I2">Model X</option>
<option value="I4">Model 3</option>

HTML

<form role="search" method="get" action="#">
<select name="model" id="model" oninput="getModels()">
<option value="none">Select a Make</option>
<option value="01">Acura</option>
</select>

<!-- Self-Populating -->
<select name="model" id="modelTgt">
</select><input type="submit" name="submit" id="submit" value="Go" />
</form>

JAVASCRIPT

function getModels(str) {
        var inPut = document.getElementById("model").value;

        // Must send it over to PHP page 
        if (str == "") {
            document.getElementById("modelTgt").innerHTML = "";
            return;
        } else {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    // CREATE THE myModels ARRAY AND USE IT WITH INNERHTML FOR OUTPUT
                    var myModels = JSON.parse(this.responseText);

                    // run the loop to create <options>
                    for (var key in myModels) {
                        if (myModels.hasOwnProperty(key)) {
                            var front = '<option value="';
                            var mid = '">';
                            var last = '</option>\n';
                            document.getElementById("modelTgt").innerHTML = (front + key + mid +                        myModels[key] + last);  
                // console.log(front + inPut + second + key + mid + myModels[key] + last)
                        }
                    }
                }
            };
            xmlhttp.open("POST", "fns_get_models.php?q=" + inPut, true);
            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xmlhttp.send('string');
        }
    }

Answer 1

我已经改变了您制作<option>元素的方式，不得不自己制作数据，但是我想您正在考虑做这样的事情

您可以使用new Option(text, value)创建一个新的Option元素，并将其直接添加到您的选择中。通过使用new Option(text, value)，这也为您提供了一种清除选择的简便方法，这可能对动态填充很有帮助。

select.options.length = 0
var myModels = {H8: 'Roadster', I1: 'Model S', I2: 'Model X', I3: 'Model 3'};

// if (this.readyState == 4 && this.status == 200) {
  const select = document.getElementById("modelTgt");
  select.options.length = 0;
  
  for (var key in myModels) {
    if (myModels.hasOwnProperty(key)) {
      select.options[select.options.length] = (new Option(myModels[key], key));
    }
  }