แนวทางประยุกต์การเลือก option ของ select element ด้วย jquery

เขียนเมื่อ 5 ปีก่อน โดย Ninenik Narkdee
select เพิ่มลด jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ select เพิ่มลด jquery

ดูแล้ว 13,893 ครั้ง


เนื้อหานี้ จะเป็นแนวทางอย่างง่าย ในการใช้งาน 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">&lt;</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">&gt;</button>
 
สิ่งที่เราต้องการทำคือ เมื่อกดปุ่มด้านหน้า ก็ลดค่า กดปุ่มด้านหลังก็เพิ่มค่าของ select
การอ้างอิงปุ่มทั้งสอง เพื่อจับ event เมื่อคลิก เราสามารถใช้เป็น $("button") ได้เลย
แต่การกำหนดการเลือก element ในลักษณะนี้ จะมีปัญหากรณีมี button อื่นๆ อยู่ในเพจนั้นด้วย
ทำให้การอ้างอิงทำได้ไม่เจาะจง แนวทางที่เป็นได้ คือ สามารถใช้ id หรือ class เพิ่มเข้าไปใน
button ทั้งสอง สมมติ ถ้าเราใช้ id ซึ่งเราจะต้องกำหนด id ที่ต่างกัน เวลาอ้างอิง ก็จะทำให้
ไม่สะดวกนัก ถึงแม้จะสามารถทำได้ก็ได้ เช่น
 
<button type="button" id="btn-prev">&lt;</button>
-------
<button type="button" id="btn-next">&gt;</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">&lt;</button>
-------
<button type="button" class="btn-go-next">&gt;</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">&lt;</button>
-------
<button type="button" class="btn-go" data-direction="next">&gt;</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">&lt;</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">&gt;</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 

 
หวังว่า เนื้อหานี้ จะเป็นแนวทาง ทำความเข้าใจเพิ่มเต็ม และเป็นไอเดียนำไปประยุกต์ใช้งานต่อไป




กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ