захват значения выбранного элемента из выпадающего списка "Выбрать", созданного из текстового файла с использованием jquery

#html #jquery #handlebars.js

#HTML #jquery #handlebars.js

Вопрос:

У меня есть текстовый файл, который содержит несколько простых слов, таких как: make, this, work.

Я хочу иметь возможность загружать текстовый файл и создавать из него динамический выпадающий список выбора. Когда пользователь нажимает отправить, он выводит значение выбранного элемента.

Ниже приведен код, я использую панель управления для отображения страницы пользователям. Когда пользователь нажимает на кнопку отправки, он переходит к индексации / отображению, чтобы увидеть, что они выбрали.

Вместо того, чтобы выводить фактическое значение выбранных параметров, выводится индекс выбранного параметра, а не значение.

 <form method="post" action="index/display" id = "first" name="first">
<fieldset>
   <div style="display: inline-block; margin-left:10px ">
      <legend>Selecting items from text file</legend>
      <script type="text/javascript" src="js/jquery.js"></script>
      <script>
         $.get("js/pytxt.txt",
           function(data) {
               /*alert( "Data Loaded: " );*/
               var options = data.split(','),
               $select = $('select#value');
               for (var i = 0; i < options.length; i  ) {
                   $select.append('<option value="'   i   '">'   options[i]   '</option>"');
                   console.log ($select)};
         });
      </script>
      <p>
         <label></label>
         <select id = "value" name="first">
            <option selected value="base">Please Select</option>
         </select>
      </p>
   </div>
   <p>
      <input type="submit">
   </p>
</fieldset>

Это функция post:

 app.post('/index/display', (req, res) => {
   res.status(200).send('POST works!'   req.body.first);
});

Ответ №1:

Пожалуйста, замените:

 $select.append('<option value="'   i   '">'   options[i]   '</option>"');

С помощью этой строки:

 $select.append('<option value="'   options[i]   '">'   options[i]   '</option>"');

Это должно решить вашу проблему.

Ответ №2:

Вы можете немного упростить это, выполнив:

 options.forEach(v => $select.append( new Option(v, v)))

ДЕМОНСТРАЦИЯ:

 let options = 'one,two,three,four'.split(','), $select = $('#value');

options.forEach(v => $select.append( new Option(v, v)))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="value"></select>