ยืนยันการเปลี่ยนแปลงข้อมูลใน select option ด้วย javascript อย่างง่าย

ตัวอย่างโค้ดต่อไปนี้ เป็นการสร้างข้อความยืนยัน ในการเปลี่ยนแปลง ข้อมูลของ option select object หรือ ที่เรียกกันว่า list menu หรือ dropdown menu โดยหลักคือ เมื่อมีการเปลี่ยนแปลงข้อมูลในรายการ list menu จะมีข้อความแจ้งเตือนว่า ต้องการยืนยัน การเปลี่ยนแปลงข้อมูล หรือไม่
ถ้าเลือกยืนยันการเปลี่ยนแปลง คือ  Yes
ค่าของ list menu ก็จะเปลี่ยนแปลงไปตามที่เราเลือก
ถ้าเลือก No
ค่าของ list menu ก็จะเป็นค่าเดิม ก่อนที่เราจะทำการเปลี่ยนแปลงรายการ
ตัวอย่าง

รายการ 1 รายการ 2 รายการ 3

โค้ดตัวอย่าง

<select name="data1" id="data1"  onfocus="chk_select1(this)" onchange="chk_select2(this)">
<option value="รายการ 1">รายการ 1</option>
<option value="รายการ 2">รายการ 2</option>
<option value="รายการ 3">รายการ 3</option>
</select>
<script type="text/javascript">
var temp_val; // ตัวแปรสำหรับเก็บค่าเก่า สำหรับกรณียกเลิก
var selIdx; // ตัวแปรสำหรับเก็บค่ารายการเลือกเก่า สำหรับกรณียกเลิก
function chk_select1(obj){ // เก็บค่าข้อมูลเมื่อคลิก
	temp_val=obj.value;	 // เก็บค่าข้อมูลเมื่อคลิก
	selIdx = obj.selectedIndex; //  เก็บค่าข้อมูลเมื่อคลิก	 
}
function chk_select2(obj){ // ตรวจสอบเมื่อเลือกเปลี่ยนแปลงรายการ
	if(confirm("Are you sure?")){
		//  กำหนดคำสั่งตามต้องการถ้าเลือก Yes
		 alert("คุณได้ทำการยืนยันการเลือกรายการใหม่");
	}else{
		// คืนค่าตัวเลือกเดิม เมื่อไม่ยืนยันการเปลี่ยนแปลง
		obj.options[selIdx].selected=true; 
	}
}
</script>