ใช้ jQuery ย้ายค่าระหว่าง multiple list box อย่างง่าย

CSS Code

<style type="text/css">
/*กำหนดความกว้างเริ่มต้นให้กับ list box*/
.myList{
	width:120px;
}
</style>

HTML Code

<form id="form1" name="form1" method="post" action="">
<!--ต้องกำหนดชื่อ (name) ต่อท้ายด้วย [] เพื่อรองรับการส่งค่าแบบ array 
และกำหนด id โดยไม่ต้องมี [] เื่พื่อใช้่งานใน jQuery
ตัวอย่าง name="data1[]"  และ   id="data1" เป็นต้น-->
  <select name="data1[]" size="5" multiple="MULTIPLE" class="myList" id="data1">
   <option value="1">ข้อมูลทดสอบที่ 1</option>
    <option value="2">ข้อมูลทดสอบที่ 2</option>
    <option value="3">ข้อมูลทดสอบที่ 3</option>
    <option value="4">ข้อมูลทดสอบที่ 4</option>
    <option value="5">ข้อมูลทดสอบที่ 5</option>
    <option value="6">ข้อมูลทดสอบที่ 6</option>
    <option value="7">ข้อมูลทดสอบที่ 7</option>
    <option value="8">ข้อมูลทดสอบที่ 8</option>
    <option value="9">ข้อมูลทดสอบที่ 9</option>
    <option value="10">ข้อมูลทดสอบที่ 10</option>
  </select>
<!--name="data2[]" และ   id="data2"-->
  <select name="data2[]" size="5" multiple="MULTIPLE" class="myList" id="data2">
  </select>
</form>

Javascript Code

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#data1").dblclick(function(){ // เมื่อ ดับเบิลคลิกที่ ตัวเลือกใน data1
		var numOp=$("#data1 option:selected").length;
		if(numOp>0){
				for(i=0;i<numOp;i++){
					$("#data2").prepend($("#data1 option:selected").eq(i));
		// เมื่อมีการย้ายตำแหน่งแล้วต้องการเอา selected ออก  ให้เอา comment 
		// บรรทัดล่างต่อจากนี้ออก		
		//			$("#data2 option:selected").attr("selected",""); 
				}
		}
	});
	$("#data2").dblclick(function(){ // เมื่อ ดับเบิลคลิกที่ ตัวเลือกใน data2
		var numOp=$("#data2 option:selected").length;
		if(numOp>0){
				for(i=0;i<numOp;i++){
					$("#data1").prepend($("#data2 option:selected").eq(i));
		// เมื่อมีการย้ายตำแหน่งแล้วต้องการเอา selected ออก  ให้เอา comment 
		// บรรทัดล่างต่อจากนี้ออก							
		//			$("#data1 option:selected").attr("selected","");
				}
		}
	});	
});
</script>

ตัวอย่าง ดับเบิลคลิกรายการใน list box แรก