Question

我有一个网站，其文件结构如下所示

website
|
|-data 
  | 
  |-clients.txt
| 
|-website
  |
  |--index.html

我的client.txt文件是结构中的客户端列表

Coke
Pepsi
Sprite

等大约有100个客户在更改，因此我不想对其进行硬编码。引导程序是否可以读取文件并生成下拉列表？ html当前看起来像这样

<div class="wrap-input100client input100-select col-6">
    <span class="label-input100">Client</span>
        <div>
        <select class="selection-2" name="service">
        <option>Pick a Client</option>

        </select>
        </div>
    <span class="focus-input100"></span>
</div>

尝试过此方法，但不幸的是它没有给出任何结果

<div class="wrap-input100client input100-select col-6">
    <span class="label-input100">Client</span>
        <div>
        <select class="selection-2" name="service">
        <option>Pick a Client</option>

        <script>
            $filename = '../data/clients.txt';
            $eachlines = file($filename, FILE_IGNORE_NEW_LINES);
            echo '<select name="value" id="value">'
            foreach($eachlines as $lines){
            echo "<option>{$lines}</option>";
                }
            echo '</select>';
        </script>

        </select>
        </div>
    <span class="focus-input100"></span>
</div>

Answer 1

使用jquery，您可以尝试以下代码

$.get('data/client.txt', function(data) {    
    var lines = data.split("\n");    
    $.each(lines, function(n, elem) {
       $('.selection-2').append('<option value="'+elem+'">' + elem + '</option>');
    });
});

使用文本文件的完整路径

Answer 2

使用XMLHttpRequest获取文件内容，根据您的文件夹结构更改文件路径。

  var rawFile = new XMLHttpRequest();
    rawFile.open("GET", "/Files/data/test.txt", false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                var allText = rawFile.responseText;
                allText = allText.split('\n');
                $.each(allText, function (i, item) {

                    $(".selection-2").append("<option value='" + item + "'>" + item + "</option>");
                });
            }
        }
    }
    rawFile.send(null);

从列表中生成下拉列表

2 个答案: