จับค่ารายการที่เลือกจากรายการเลือกแบบเลื่อนลงที่สร้างจากไฟล์ข้อความโดยใช้ 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>