การดึงข้อความจากกล่องดรอปดาวน์ใน JavaScript

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

ปัญหา: การดึงข้อความที่แสดง

สมมุติว่าคุณมีเมนูแบบเลื่อนลงใน HTML ของคุณ ขณะที่คุณสามารถรับ value ของตัวเลือกที่เลือกได้อย่างง่ายดายโดยใช้ JavaScript ต่อไปนี้:

document.getElementById('newSkill').value

คุณอาจพบความยากลำบากหากคุณพยายามจะได้รับ text ที่เห็นได้ชัดเจนเกี่ยวกับตัวเลือกที่เลือกนั้น ตัวอย่างเช่น ถ้าเมนูแบบเลื่อนของคุณมีทักษะเป็นตัวเลือก คุณจะดึงชื่อทักษะที่เลือกได้อย่างไร? นี่คือโครงสร้าง HTML สำหรับอ้างอิง:

<select name="newSkill" id="newSkill">
    <option value="1">ทักษะหนึ่ง</option>
    <option value="2">ทักษะอีกหนึ่ง</option>
    <option value="3">ทักษะอีกหนึ่ง</option>
</select>

วิธีแก้ไข: การเข้าถึงข้อความที่แสดง

ในการดึงข้อความที่แสดงจากตัวเลือกที่เลือกอยู่ในเมนูแบบเลื่อนลง คุณสามารถใช้คุณสมบัติของ JavaScript สองสามชิ้น ปฏิบัติตามขั้นตอนเหล่านี้เพื่อดำเนินการอย่างมีประสิทธิภาพ:

การนำไปใช้โค้ดทีละขั้นตอน

1. รับองค์ประกอบเลือก: ก่อนอื่นให้รับการอ้างอิงถึงเมนูแบบเลื่อนโดยใช้ document.getElementById()

   var skillsSelect = document.getElementById("newSkill");
   

2. กำหนดดัชนีที่เลือก: คุณสามารถตรวจสอบว่าตัวเลือกใดถูกเลือกในขณะนี้โดยใช้คุณสมบัติ selectedIndex

   var selectedIndex = skillsSelect.selectedIndex;
   

3. ดึงข้อความของตัวเลือกที่เลือก: ตอนนี้เข้าถึงอาร์เรย์ options โดยใช้ selectedIndex และอ่านคุณสมบัติ text จากตัวเลือกที่เลือก

   var selectedText = skillsSelect.options[selectedIndex].text;
   

ตัวอย่างทั้งหมด

นี่คือตัวอย่างการนำไปใช้ทั้งหมดของกระบวนการที่กล่าวถึงข้างต้น:

var skillsSelect = document.getElementById("newSkill");
var selectedText = skillsSelect.options[skillsSelect.selectedIndex].text;
console.log(selectedText);  // แสดงข้อความที่แสดงอยู่ของตัวเลือกที่เลือก

คำอธิบายของโค้ด

• document.getElementById("newSkill"): การเรียกฟังก์ชันนี้ดึงเอาองค์ประกอบ HTML <select> ตาม ID ของมัน

• skillsSelect.selectedIndex: นี่จะให้เลขดัชนีของตัวเลือกที่ถูกเลือกในกล่องเลือก

• skillsSelect.options[selectedIndex].text: โดยใช้ดัชนี คุณจะเข้าถึงตัวเลือกที่เกี่ยวข้องและดึงค่าข้อความที่มองเห็นได้ต่อผู้ใช้

สรุป

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

อย่าลืมฝึกฝนเทคนิคเหล่านี้ในโครงการของคุณเอง และดูว่าเมื่อไรทักษะ JavaScript ของคุณจะเติบโตขึ้น!