时间戳

首页 > 解决方案 > 从 xhttp.open("Get") 动态填充下拉列表；回复

javascript - 从 xhttp.open("Get") 动态填充下拉列表；回复

问题描述

我有一个本地文本文件，我试图用该数据填充选择下拉列表。我已经安装了 IIS 以通过本地限制并通过 CORS。我使用 xhttp 方法从位于 IIS 服务器上的文件中检索文本文件数据。从下面的代码中可以看出，我可以在 div 中显示它。我正在尝试将这些数据放入一个下拉列表中，我可以轻松地从中获取值。例如，如果用户选择“Part1”，我会从 1 中获得一个整数值，就像我从我明确声明的任何其他下拉列表中一样。如果可能的话，我更喜欢 javascript 解决方案，因为这是我大部分时间都在使用的代码。

我在谷歌上寻找没有真正匹配的解决方案。

<body onload="pList();">

<div id="PartList"></div>

<script>
function pList() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("PartList").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "http://127.0.0.1:8080/PartList.txt", true);
  xhttp.send();


}
</script>

标签： javascripthtmlajax

解决方案

您必须将数据拆分为一个数组，然后以这种方式添加到选择中：

<script>
function pList() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var options = this.responseText.split(delimiter);

      var select = document.getElementById("PartList");
      for (var i = 0; i < options.length; i++) {
          var option = document.createElement("option");
          option.text = options[i];
          option.value = i;
          select.add(option);
      }
    }
  };
  xhttp.open("GET", "http://127.0.0.1:8080/PartList.txt", true);
  xhttp.send();


}
</script>

如果要在加载之前清除选择，请使用以下命令：

document.getElementById("PartList").innerHTML = "";

推荐阅读