jquery를 사용하여 텍스트 파일에서 생성 된 선택 드롭 다운 목록에서 선택한 항목 값 캡처

Question

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>

이것은 포스트 기능입니다.

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

Answer 1

교체하십시오 :

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

이 라인으로 :

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

이렇게하면 문제가 해결됩니다.

Answer 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>