Question

我的项目结构中有一个文本文件，其中包含10行名称

Sarah
Adam
John
Connor
...

我想将所有这些行作为选项添加到我的as选项中

<select id="nameSelect">
    <!-- I want them here -->
</select>

我的问题是..我会使用纯JavaScript还是类似React的东西？因为如果我想向select添加100个项目，那我就不想对每个选项进行硬编码。

Answer 1

如果文本文件和带有选项的文件位于同一服务器上，则确实可以仅使用前端中的JavaScript根据文本文件的内容显示选项。页面加载时，使用Ajax检索文件内容，并在回调中按换行分隔，并将每行添加为选项。

<script> window.onload = function() { var client = new XMLHttpRequest(); client.open('GET', '/foo.txt'); client.onreadystatechange = function() { var select = document.getElementById("nameSelect"), options = client.responseText.split("\n"), i, _html = ""; for ( i = 0; i < options.length; i++ ) { _html += "<option value=" + options[i] +">" + options[i] + "</option>"; } select.innerHTML = _html; } client.send(); } </script>

Answer 2

这是使用NodeJS（一种基于JavaScript的流行服务器端框架）的一种简单方法。该页面将存储在URL http://localhost:8080：

//For the purposes of this answer, your text file is called names.txt

var http = require("http");
var fs = require("fs");

http.createServer(function (req, res) {
    fs.readFile("names.txt", function (err, data) {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write("<select id='nameSelect'">
        var namesArray = data.split("\n");
        for (var i = 0; i < namesArray.length; i++) {
            res.write("<option value='" + namesArray[i] + "'>" + namesArray[i] + "</option>");
         }
         res.write("</select>");
         res.end();
     });
}).listen(8080);

如何从文本文件读取数据并将其附加到选择标记的选项

2 个答案: