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

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
javascript select

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

ดูแล้ว 18,776 ครั้ง


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

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

<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>

 



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











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





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

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


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


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







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