แก้ปัญหาเว็บแอป - ตัวเลือกเว้นวรรคหลายเคาะใช้งานไม่ได้

 

วันนี้ขออนุญาตแชร์ประสบการณ์ที่เจอกับตัวเองในหลายๆ โปรเจค เวลาพิมพ์ชื่อ หรือข้อมูลลงไปแล้วดึงไปทำเป็นตัวเลือก กรณีมีการเว้นวรรคมากกว่า 1 เคาะในจุดเดียวกันแล้วจะมีปัญหาเนื่องจากค่าที่เราได้คลาดเคลื่อนไปจากข้อมูลเดิม มาชมคลิปอธิบายพร้อมตัวอย่างครับ

หวังว่าคลิปนี้จะมีประโยชน์กับหลายๆท่านที่กำลังประสบปัญหานี้อยู่ และจะแจกโค้ดตัวอย่างในคลิปนี้ด้วยครับ

โค้ดตัวอย่าง https://docs.google.com/spreadsheets/d/1Uiyfhw-6e-GV7zVcCXGIOSgSLBXBd3FxDfz511HQR_g/copy

โค้ดสร้าง option ในตัวอย่าง

data.forEach(function (item) {

    let option = document.createElement("option"); // สร้างตัวเลือกใหม่

    option.text = item; // กำหนดข้อความของตัวเลือก

    option.value = item; //เพิ่มค่า value

    listSelect.appendChild(option); // เพิ่มตัวเลือกลงใน dropdown

  });

หรือถ้าเขียนแบบอื่นก็ได้ เช่น

data.forEach(function (item) {

   let option = `<option value="${item}">${item}</option>`

   listSelect.appendChild(option); // เพิ่มตัวเลือกลงใน dropdown

 });

หรือแบบอื่นๆอีกก็ได้ แต่อย่าลืมให้ใส่ค่า value ลงไปด้วย