jQuery ดึง attribute จาก select option

jQuery ดึง attribute จาก select option บทความนี้สอนใช้ jQuery เพื่อดึงข้อมูลใน attribute เช่น data-value ที่อยู่ภายใน select option โดยดึงเฉพาะ select option ที่ถูกเลือกด้วยคำสั่ง find และ attr สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง jQuery ดึง attribute จาก select option

<select id="select">
    <option data-value="red">Red</option>
    <option data-value="green">Green</option>
    <option data-value="blue">Blue</option>
</select>

<script>
    $(document).ready(function(){
        $("#select").change(function(){
            console.log( $(this).find(':selected').attr('data-value') );
        });
    });
</script>

จากตัวอย่างสร้าง select กำหนด id = select และมี option ทั้งหมด 3 อัน พร้อมกับกำหนดค่าไว้ภายใน attribute data-value ได้แก่ red, green และ blue จากนั้นเขียนคำสั่งด้วย jQuery เมื่อผู้ใช้งานเลือก select option โปรแกรมจะค้นหา select option ที่ถูกเลือก และดึงค่าใน attribute data-value ออกมาด้วย $(this).find(':selected').attr('data-value') พร้อมกับแสดงผลลัพธ์ออกสู่หน้าจอ console ด้วย console.log