เนื้อหานี้ จะเป็นแนวทางอย่างง่าย ในการใช้งาน jquery สำหรับจัดการกับการเลือก option
ของ select element ใน html โดยแม้จะเป็นตัวอย่างที่อาจจะไม่ได้มีการใช้งานบ่อย แต่ก็
พอเป็นแนวทางหรือไอเดียในการนำไปประยุกต์หรือปรับใช้เพิ่มเติมได้
เริ่มต้นเราจะมี select element เบื้องต้นดังนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Document</title> </head><body> <select name="ele_select" id="ele_select"> <option value="">Choose..</option> <option value="1">Data 1</option> <option value="2">Data 2</option> <option value="3">Data 3</option> <option value="4">Data 4</option> <option value="5">Data 5</option></select> <script type="text/javascript">$(function(){ });</script></body></html> |
ต่อไปเราจะกำหนดการรับ event ที่เกิดขึ้นกับ select เมื่อมีการเปลี่ยนแปลงค่า
โดยจะกำหนดในส่วนของ jquery ดังนี้
1 2 3 4 | $("#ele_select").on("change",function(){ // เมื่อมีการเปลี่ยนแปลงค่าที่เลือก var selectValue = $(this).val(); // เก็บค่าที่เลือก เป็นค่า value ที่อยู่ใน option ที่เลือก alert(selectValue); // แสดงค่าที่เลือก }); |
การอ้างอิง jquery object ของ select element คือ
1 | $("#ele_select") |
การอ้างอิงด้วย DOM object ด้วย JavaScript จะเป็น
1 | document.getElementById('ele_select'); |
หรือเราสามารถเรียกแบบ DOM object ผ่าน jquery ดังนี้
1 | $("#ele_select")[0] |
หรือก็คือ
1 | $("#ele_select")[0] เท่ากับ document.getElementById('ele_select'); |
และ
1 | $("#ele_select") ไม่เท่ากับ $("#ele_select")[0] |
เพราะเป็น object คนละประเภทกัน ทำให้ method หรือ property ที่เรียกใช้งานอาจแตกต่างกัน
ใน select element ข้างต้น เราจะเห็นว่ามี option ทั้งหมด 6
การระบุหรือหาจำนวน option ทั้งหมด สามารถใช้เป็น
1 | var numOpt = $("#ele_select option").length; |
ใน select element เราสามารถดูค่า Index ของ option ที่ถูกเลือกอยู่ได้ โดยค่า index จะเริ่มต้นที่ 0
สำหรับ option แรก นั้นหมายความว่า ถ้ามี option ทั้งหมด 6 ตัว ค่า index ที่สูงที่สุดจะเท่ากับ 5
หรือเท่ากับ จำนวน option ลบด้วย 1
1 | var indexMax = $("#ele_select option").length-1; |
ค่า index ของเรายการที่ถูกเลือก สมมติเช่น ตอนนี้เลือกรายการ Data 1
1 | <option value="1">Data 1</option> |
จะเห็นว่า เป็น option ตัวที่ 2 ค่า index ของตัวนี้คือ 1 เราสามารถดูค่า index ของรายการที่ถูกเลือก
ได้ดังนี้
1 | var indexVal = $("#ele_select")[0].selectedIndex; |
ต่อไป สมมติเราจะสร้างปุ่มขึ้นมาสองอัน ไว้ด้านหน้าและด้านหลังของ select element เพื่อใช้เพิ่มค่า
และลดค่าของ select element แทนการกดเข้าไปเลือกผ่าน select element โดยตรง เป็นดังนี้
1 2 3 4 5 6 7 8 9 10 | <button type="button"><</button><select name="ele_select" id="ele_select"> <option value="">Choose..</option> <option value="1">Data 1</option> <option value="2">Data 2</option> <option value="3">Data 3</option> <option value="4">Data 4</option> <option value="5">Data 5</option></select> <button type="button">></button> |
สิ่งที่เราต้องการทำคือ เมื่อกดปุ่มด้านหน้า ก็ลดค่า กดปุ่มด้านหลังก็เพิ่มค่าของ select
การอ้างอิงปุ่มทั้งสอง เพื่อจับ event เมื่อคลิก เราสามารถใช้เป็น $("button") ได้เลย
แต่การกำหนดการเลือก element ในลักษณะนี้ จะมีปัญหากรณีมี button อื่นๆ อยู่ในเพจนั้นด้วย
ทำให้การอ้างอิงทำได้ไม่เจาะจง แนวทางที่เป็นได้ คือ สามารถใช้ id หรือ class เพิ่มเข้าไปใน
button ทั้งสอง สมมติ ถ้าเราใช้ id ซึ่งเราจะต้องกำหนด id ที่ต่างกัน เวลาอ้างอิง ก็จะทำให้
ไม่สะดวกนัก ถึงแม้จะสามารถทำได้ก็ได้ เช่น
1 2 3 | <button type="button" id="btn-prev"><</button>-------<button type="button" id="btn-next">></button> |
เวลาอ้างอิงก็จะใช้เป็น
1 2 3 | $("#btn-prev,#btn-next").on("click",function(){ // เมื่อคลิกที่ปุ่มทั้งสอง --- // ต่อเราเราต้องเช็คว่าปุ่มไหนถูกคลิก เพื่อจะให้ทำคำสั่งต่างๆ กัน}); |
ก็จะได้เป็น
1 2 3 4 5 6 7 | $("#btn-prev,#btn-next").on("click",function(){ if($(this).attr("id")=="btn-prev"){ // ถ้าเป็นปุ่มลดค่า alert("Decrement--"); }else{ alert("Increment--"); }}); |
ต่อไป สมมติเราใช้เป็น css class ก็จะกำหนดในลักษณะดังนี้
1 2 3 | <button type="button" class="btn-go-prev"><</button>-------<button type="button" class="btn-go-next">></button> |
เวลาอ้างอิงก็จะใช้เป็น
1 2 3 | $(".btn-go-prev,.btn-go-next").on("click",function(){ // เมื่อคลิกที่ปุ่มทั้งสอง --- // ต่อเราเราต้องเช็คว่าปุ่มไหนถูกคลิก เพื่อจะให้ทำคำสั่งต่างๆ กัน}); |
ก็จะได้เป็น
1 2 3 4 5 6 7 | $(".btn-go-prev,.btn-go-next").on("click",function(){ if($(this).hasClass("btn-go-prev")){ alert("Decrement--"); }else{ alert("Increment--"); }}); |
หรือจะย่อให้สั้นลงอีกก็จะเป็น
1 2 3 4 5 6 7 | $("button[class^='btn-go-']").on("click",function(){ // ถ้าปุ่มที่มี css class ขึ้นต้นด้วย btn-go if($(this).hasClass("btn-go-prev")){ alert("Decrement--"); }else{ alert("Increment--"); }}); |
หรือจะใช้ custom data attribute เข้ามาช่วยโดยกำหนดเป็นดังนี้
1 2 3 | <button type="button" class="btn-go" data-direction="prev"><</button>-------<button type="button" class="btn-go" data-direction="next">></button> |
เวลาอ้างอิงก็จะใช้เป็น
1 2 3 4 5 6 7 | $(".btn-go").on("click",function(){ if($(this).data("direction")=="prev"){ alert("Decrement--"); }else{ alert("Increment--"); }}); |
ทั้งหมดข้างต้น เป็นแนวทางการกำหนด selector หรือที่เรียกว่าการอ้างอิงตัว object ในรูปแบบต่างๆ
เพื่อไปส่วนอื่นต่อ เราจะใช้วิธีกำหนดแบบ css class เพื่อให้ส่วนของ html ไม่ยาวมากหรือรกเกินไป
จะได้เป็น
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <button type="button" class="btn-go-prev"><</button><select name="ele_select" id="ele_select"> <option value="">Choose..</option> <option value="1">Data 1</option> <option value="2">Data 2</option> <option value="3">Data 3</option> <option value="4">Data 4</option> <option value="5">Data 5</option></select> <button type="button" class="btn-go-next">></button> <script type="text/javascript">$(function(){ $("button[class^='btn-go-']").on("click",function(){ if($(this).hasClass("btn-go-prev")){ alert("Decrement--"); }else{ alert("Increment--"); } }); $("#ele_select").on("change",function(){ var selectValue = $(this).val(); alert(selectValue); });});</script> |
ปรับการทำงานของส่วน button ใหม่เป็นดังนี้
1 2 3 4 5 6 7 8 9 10 | $("button[class^='btn-go-']").on("click",function(){ var indexVal = $("select#ele_select")[0].selectedIndex; // ค่า index ปัจจุบันที่ถูกเลือกอยู่ var indexMax = $("select#ele_select option").length-1; // ค่า สูงสุดของ index if($(this).hasClass("btn-go-prev")){ indexVal = (indexVal>0)?indexVal-1:0; // ลดค่าลงเรื่อยๆ ไม่ให้น้อยกว่า 0 }else{ indexVal = (indexVal<indexMax)?indexVal+1:indexMax; // เพิ่มค่าเรื่อยๆ ไม่ให้มากกว่า indexMax } $("select#ele_select")[0].selectedIndex = indexVal; // เปลี่ยนค่า option ไปตาม index ที่เลือก}); |
ถึงส่วนนี้จะเห็นว่า เมื่อเราเพิ่มหรือลดค่าเมื่อคลิก button ทั้งสอง ค่าของ select option ก็จะเปลี่ยนไปด้วย
แต่ event เดิมที่เราได้ผูกไว้ เมื่อมีการเปลี่ยนแปลงค่า select จะยังไม่ทำงาน วิธีการคือให้เราเพิ่มคำสั่ง trigger
ให้ทำการสร้าง event ให้กับ select เพื่อให้ไปทำงาน คำสั่ง เราผูกไว้ โดยเพิ่มโค้ดนี้ต่อเข้าไปดังนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $("button[class^='btn-go-']").on("click",function(){ var indexVal = $("select#ele_select")[0].selectedIndex; var indexMax = $("select#ele_select option").length-1; if($(this).hasClass("btn-go-prev")){ indexVal = (indexVal>0)?indexVal-1:0; }else{ indexVal = (indexVal<indexMax)?indexVal+1:indexMax; } $("select#ele_select")[0].selectedIndex = indexVal; $("#ele_select").trigger("change");}); $("#ele_select").on("change",function(){ var selectValue = $(this).val(); alert(selectValue);}); |
ดูตัวอย่างการทำงานได้ที่ DEMO
หวังว่า เนื้อหานี้ จะเป็นแนวทาง ทำความเข้าใจเพิ่มเต็ม และเป็นไอเดียนำไปประยุกต์ใช้งานต่อไป
