从列表生成下拉列表

Question

我有一个网站的文件结构，看起来像这样

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

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

Coke
Pepsi
Sprite

等等。大约有100个客户端在变化，所以我不想硬编码它们。有没有办法让bootstrap读取文件并生成下拉列表？当前的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);