Question

我是一个相对较新的prgramming，目前仍然坚持一个问题。感谢您的反馈，我使用谷歌并查看了许多关于堆栈溢出的类似问题，他们似乎都给出了从html下拉列表导入值到JavaScript的答案，而我需要完全相反，我一直在寻找答案现在几个小时，我只是在搜索了这么久之后我会直接问这里。目前我在html中编写了下拉列表，我想用JavaScript编写一个脚本，将本地计算机上的文本文件中的值转换为html格式的下拉列表。我试过FileReader和XMLHttpRequest（）;但无济于事这是我的HTML代码：

      <optgroup id="Plants" label="plants">
   <option type="checkbox" id="plant_1" name="plant_1" value="Plant1">Plant1</option>
   <option type="checkbox" id="plant_2" name="plant_2" value="Plant2">Plant2</option>
   <option type="checkbox" id="plant_3" name="plant_3" value="Plant3">Plant3</option>
      </optgroup>

    <optgroup id="Animals" label="animals">
   <option type="checkbox" id="Animal_1" name="Animal_1" value="Animal1">Animal1</option>
   <option type="checkbox" id="Animal_2" name="Animal_2" value="Animal2">Animal2</option>
   <option type="checkbox" id="Animal_3" name="Animal_3" value="Animal3">Animal3</option>
      </optgroup>

我的脚本是：

  $.Get("TestFile.txt", function k(data){

  var lines = data.split('/n');
 }
   var dropdown = $('Plants');
  for(var i =0; i < lines.length; i++) {
   var count = lines[i];

 $('dropdown').append(count);
  }
  return lines;
  });

testfile.txt文件的外观如下：

   Plants - 
   Rose
   Bannana
   Blackberry

   Animals - 
   Lion
   Cow
   Elephant

Answer 1

您可以使用append功能执行您想要的操作。下面的代码可以满足您的需求。请记住更改文本文件的位置。此外，您可以使用不同的算法来解析文本文件：

<html>
  <header>
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  </header>
  <body>
    <select name="myselect">
    </select>
  </body>
<script>
$.get("http://127.0.0.1/file.txt", function (data) {
  var lines = data.split('\n').map(function(line){
    return line.trim();
  });
  var select = $("select[name=myselect]")
  var optionCounter = 0;
  var currentGroup = "";
  lines.forEach(function(line){
    if(line.endsWith(" -")){
      currentGroup = line.substring(0, line.length - 2);
      optionCounter = 0;
      select.append("<optgroup id='" + currentGroup + "' label='" + currentGroup + "'>")
    } else if(line === ""){
      select.append("</optgroup>");
    } else {
      select.append("<option type='checkbox' id='" 
          + (currentGroup + optionCounter) + "' name='" 
          + (currentGroup + optionCounter) + "' value='" 
          + line + "'>" + line + "</option>");
    }
  });
  console.log(lines);
});
</script>
</html>

```

如何将值从文本文件导入到javascript，然后填充html下拉列表

1 个答案: