เนื้อหานี้ จะเป็นแนวทางอย่างง่าย ในการใช้งาน jquery สำหรับจัดการกับการเลือก option
ของ select element ใน html โดยแม้จะเป็นตัวอย่างที่อาจจะไม่ได้มีการใช้งานบ่อย แต่ก็
พอเป็นแนวทางหรือไอเดียในการนำไปประยุกต์หรือปรับใช้เพิ่มเติมได้
เริ่มต้นเราจะมี select element เบื้องต้นดังนี้
<!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 src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
});
</script>
</body>
</html>
ต่อไปเราจะกำหนดการรับ event ที่เกิดขึ้นกับ select เมื่อมีการเปลี่ยนแปลงค่า
โดยจะกำหนดในส่วนของ jquery ดังนี้
$("#ele_select").on("change",function(){ // เมื่อมีการเปลี่ยนแปลงค่าที่เลือก
var selectValue = $(this).val(); // เก็บค่าที่เลือก เป็นค่า value ที่อยู่ใน option ที่เลือก
alert(selectValue); // แสดงค่าที่เลือก
});
การอ้างอิง jquery object ของ select element คือ
$("#ele_select")
การอ้างอิงด้วย DOM object ด้วย JavaScript จะเป็น
document.getElementById('ele_select');
หรือเราสามารถเรียกแบบ DOM object ผ่าน jquery ดังนี้
$("#ele_select")[0]
หรือก็คือ
$("#ele_select")[0] เท่ากับ document.getElementById('ele_select');
และ
$("#ele_select") ไม่เท่ากับ $("#ele_select")[0]
เพราะเป็น object คนละประเภทกัน ทำให้ method หรือ property ที่เรียกใช้งานอาจแตกต่างกัน
ใน select element ข้างต้น เราจะเห็นว่ามี option ทั้งหมด 6
การระบุหรือหาจำนวน option ทั้งหมด สามารถใช้เป็น
var numOpt = $("#ele_select option").length;
ใน select element เราสามารถดูค่า Index ของ option ที่ถูกเลือกอยู่ได้ โดยค่า index จะเริ่มต้นที่ 0
สำหรับ option แรก นั้นหมายความว่า ถ้ามี option ทั้งหมด 6 ตัว ค่า index ที่สูงที่สุดจะเท่ากับ 5
หรือเท่ากับ จำนวน option ลบด้วย 1
var indexMax = $("#ele_select option").length-1;
ค่า index ของเรายการที่ถูกเลือก สมมติเช่น ตอนนี้เลือกรายการ Data 1
<option value="1">Data 1</option>
จะเห็นว่า เป็น option ตัวที่ 2 ค่า index ของตัวนี้คือ 1 เราสามารถดูค่า index ของรายการที่ถูกเลือก
ได้ดังนี้
var indexVal = $("#ele_select")[0].selectedIndex;
ต่อไป สมมติเราจะสร้างปุ่มขึ้นมาสองอัน ไว้ด้านหน้าและด้านหลังของ select element เพื่อใช้เพิ่มค่า
และลดค่าของ select element แทนการกดเข้าไปเลือกผ่าน select element โดยตรง เป็นดังนี้
<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 ที่ต่างกัน เวลาอ้างอิง ก็จะทำให้
ไม่สะดวกนัก ถึงแม้จะสามารถทำได้ก็ได้ เช่น
<button type="button" id="btn-prev"><</button> ------- <button type="button" id="btn-next">></button>
เวลาอ้างอิงก็จะใช้เป็น
$("#btn-prev,#btn-next").on("click",function(){ // เมื่อคลิกที่ปุ่มทั้งสอง
--- // ต่อเราเราต้องเช็คว่าปุ่มไหนถูกคลิก เพื่อจะให้ทำคำสั่งต่างๆ กัน
});
ก็จะได้เป็น
$("#btn-prev,#btn-next").on("click",function(){
if($(this).attr("id")=="btn-prev"){ // ถ้าเป็นปุ่มลดค่า
alert("Decrement--");
}else{
alert("Increment--");
}
});
ต่อไป สมมติเราใช้เป็น css class ก็จะกำหนดในลักษณะดังนี้
<button type="button" class="btn-go-prev"><</button> ------- <button type="button" class="btn-go-next">></button>
เวลาอ้างอิงก็จะใช้เป็น
$(".btn-go-prev,.btn-go-next").on("click",function(){ // เมื่อคลิกที่ปุ่มทั้งสอง
--- // ต่อเราเราต้องเช็คว่าปุ่มไหนถูกคลิก เพื่อจะให้ทำคำสั่งต่างๆ กัน
});
ก็จะได้เป็น
$(".btn-go-prev,.btn-go-next").on("click",function(){
if($(this).hasClass("btn-go-prev")){
alert("Decrement--");
}else{
alert("Increment--");
}
});
หรือจะย่อให้สั้นลงอีกก็จะเป็น
$("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 เข้ามาช่วยโดยกำหนดเป็นดังนี้
<button type="button" class="btn-go" data-direction="prev"><</button> ------- <button type="button" class="btn-go" data-direction="next">></button>
เวลาอ้างอิงก็จะใช้เป็น
$(".btn-go").on("click",function(){
if($(this).data("direction")=="prev"){
alert("Decrement--");
}else{
alert("Increment--");
}
});
ทั้งหมดข้างต้น เป็นแนวทางการกำหนด selector หรือที่เรียกว่าการอ้างอิงตัว object ในรูปแบบต่างๆ
เพื่อไปส่วนอื่นต่อ เราจะใช้วิธีกำหนดแบบ css class เพื่อให้ส่วนของ html ไม่ยาวมากหรือรกเกินไป
จะได้เป็น
<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 src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<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 ใหม่เป็นดังนี้
$("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 เพื่อให้ไปทำงาน คำสั่ง เราผูกไว้ โดยเพิ่มโค้ดนี้ต่อเข้าไปดังนี้
$("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
หวังว่า เนื้อหานี้ จะเป็นแนวทาง ทำความเข้าใจเพิ่มเต็ม และเป็นไอเดียนำไปประยุกต์ใช้งานต่อไป
