jQuery ดึงข้อมูล SelectBox หรือ drop-down list

สอนเขียน jQuery ดึงข้อมูล SelectBox หรือ drop-down list บทความนี้แนะนำวิธีการดึงข้อมูลจาก SelectBox ของ HTML ด้วย jQuery Framework โดยการอ้างอิงผ่าน id และใช้คำสั่ง val() เพื่อดึงข้อมูลที่ต้องการออกมา สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง jQuery ดึงข้อมูล SelectBox หรือ drop-down list

<select id="select">
    <option value="ส้ม">ส้ม</option>
    <option value="มะละกอ">มะละกอ</option>
    <option value="กล้วย">กล้วย</option>
</select>
<input type="button" id="btn" value="ดึงข้อมูลจาก SelectBox">

<script>
    $("#btn").click(function(){
        let v = $("#select").val();
        alert( v );
    });
</script>

1. กำหนด id = select ให้กับ SelectBox หรือ drop-down list และกำหนด id = btn ให้กับปุ่ม Button

2. เมื่อผู้ใช้งานเลือกข้อมูลจาก SelectBox และกดปุ่ม Button โปรแกรมจะวิ่งเข้าไปทำงานใน $("#btn").click(function() เนื่องจาก id = btn ถูกคลิก

3. ตัวแปร v จะเก็บค่าของ SelectBox ที่ถูกเลือกอ้างอิงจาก id = select และใช้คำสั่ง val() ดึงข้อมูล

4. แสดงค่าจาก SelectBox ออกสู่หน้าจอผ่านตัวแปร v ด้วยคำสั่ง alert