Создание выпадающего из списка

Question

У меня есть веб-сайт с файловой структурой, которая выглядит следующим образом

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

Мой файл clients.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

Используйте 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);

Answer 2

Используя 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>');
    });
});

использовать полный путь для текстового файла