ประยุกต์การเลือกจาก listbox มากกว่า 2 รายการ ที่สัมพันธ์กัน
เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdeelistbox
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ listbox
ดูแล้ว 21,674 ครั้ง
ไปที่
Copy
แนวทางและโค้ดตัวอย่างต่อไปนี้ เป็นการประยุกต์ใช้งาน listbox หรือ
แท็ก select ที่มีความสัมพันธ์ของข้อมูล มากกว่า 2 รายการ ยกตัวอย่าง
เช่น การเลือกจังหวัด เลือกอำเภอ เลือกตำบล
หรือ การเลือกคณะ เลือกสาขา เลือกวิชา
หรือ เลือกยี่ห้อ เลือกประเภท และเลือก ขนาด / สี
แบบนี้เป็นต้น
เนื้อหานี้จะประยุกต์จากบทความเก่า เรื่อง
กำหนดรายการใน listbox ที่ 2 จากเงื่อนไขการเลือก listbox ที่ 1 ด้วย ajax ใน jquery อย่างง่าย
https://www.ninenik.com/content.php?arti_id=207 via @ninenik
ดังนั้นการใช้งานกับฐานข้อมูล สามารถดูจากบทความข้างต้น ได้
สำหรับในที่นี้จะใช้วิธีนำเสนอ เป็นแนวทาง สามารถนำไปประยุกต์หรือดัด
แปลงเพิ่มเติมได้ตามความเหมาะสม
ตัวอย่าง
ไฟล์ทดสอบ four_listbox.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .mylabel{ display: inline-block; width: 150px; margin-bottom: 10px; } </style> </head> <body> <div style="margin:auto;width:80%;"> <form id="form1" name="form1" method="post" action=""> <br> <br> <span class="mylabel">ตัวเลือกที่1: </span> <select name="list1" id="list1"> <option value="">เลือกรายการ</option> <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> </select> <br> <span class="mylabel">ตัวเลือกที่2: </span> <select name="list2" id="list2"> <option value="">เลือกรายการ</option> </select> <br> <span class="mylabel">ตัวเลือกที่3: </span> <select name="list3" id="list3"> <option value="">เลือกรายการ</option> </select> <br> <span class="mylabel">ตัวเลือกที่4: </span> <select name="list4" id="list4"> <option value="">เลือกรายการ</option> </select> <br> <br> <span class="mylabel"></span> <input type="submit" name="button" id="button" value="Submit" /> <br> </form> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ // เมื่อเปลี่ยนค่าของ select id เท่ากับ list1 $("select#list1").change(function(){ // ส่งค่า ตัวแปร list1 มีค่าเท่ากับค่าที่เลือก ส่งแบบ get ไปที่ไฟล์ data_for_list2.php $.get("data_for_list2.php",{ list1:$(this).val() },function(data){ // คืนค่ากลับมา $("select#list2").html(data); // นำค่าที่ได้ไปใส่ใน select id เท่ากับ list2 $("select#list2").trigger("change"); // อัพเดท list2 เพื่อให้ list2 ทำงานสำหรับรีเซ็ตค่า }); }); // เมื่อเปลี่ยนค่าของ select id เท่ากับ list2 $("select#list2").change(function(){ // ส่งค่า ตัวแปร list2 มีค่าเท่ากับค่าที่เลือก ส่งแบบ get ไปที่ไฟล์ data_for_list3.php $.get("data_for_list3.php",{ list2:$(this).val() },function(data){ // คืนค่ากลับมา $("select#list3").html(data); // นำค่าที่ได้ไปใส่ใน select id เท่ากับ list3 $("select#list3").trigger("change"); // อัพเดท list3 เพื่อให้ list3 ทำงานสำหรับรีเซ็ตค่า }); }); // เมื่อเปลี่ยนค่าของ select id เท่ากับ list3 $("select#list3").change(function(){ // ส่งค่า ตัวแปร list3 มีค่าเท่ากับค่าที่เลือก ส่งแบบ get ไปที่ไฟล์ data_for_list4.php $.get("data_for_list4.php",{ list3:$(this).val() },function(data){ // คืนค่ากลับมา $("select#list4").html(data); // นำค่าที่ได้ไปใส่ใน select id เท่ากับ list4 $("select#list4").trigger("change"); // อัพเดท list4 เพื่อให้ list4 ทำงานสำหรับรีเซ็ตค่า }); }); }); </script> </body> </html>
ไฟล์ data_for_list2.php
<?php header("Content-type:text/html; charset=UTF-8"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); ?> <?php if(isset($_GET['list1']) && $_GET['list1']!=""){?> <option value="">เลือกรายการ</option> <?php for($i=1;$i<=$_GET['list1'];$i++){ ?> <option value="<?=$i?>">เลือกรายการ <?=$i?></option> <?php } ?> <?php }else{ ?> <option value="">เลือกรายการ</option> <?php } ?>
ไฟล์ data_for_list3.php
<?php header("Content-type:text/html; charset=UTF-8"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); ?> <?php if(isset($_GET['list2']) && $_GET['list2']!=""){?> <option value="">เลือกรายการ</option> <?php for($i=1;$i<=$_GET['list2'];$i++){ ?> <option value="<?=$i?>">เลือกรายการ <?=$i?></option> <?php } ?> <?php }else{ ?> <option value="">เลือกรายการ</option> <?php } ?>
ไฟล์ data_for_list4.php
<?php header("Content-type:text/html; charset=UTF-8"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); ?> <?php if(isset($_GET['list3']) && $_GET['list3']!=""){?> <option value="">เลือกรายการ</option> <?php for($i=1;$i<=$_GET['list3'];$i++){ ?> <option value="<?=$i?>">เลือกรายการ <?=$i?></option> <?php } ?> <?php }else{ ?> <option value="">เลือกรายการ</option> <?php } ?>
สำหรับไฟล์ data_for_list(x).php นั้น ตามตัวอย่างจะทำแยกเพื่อให้เห็น
แนวทางชัดเจน ส่วนสำหรับ การไปใช้งานงาน อาจจะใข้เป็นไฟล์เดียวก็ได้
แล้วกำหนด if else เป็นเงื่อนไขสำหรับข้อมูลแทน
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
เนื้อหาที่เกี่ยวข้อง
-
07 Jun2009กำหนดรายการใน listbox ที่ 2 จากเงื่อนไขการเลือก listbox ที่ 1 ด้วย ajax ใน jquery อย่างง่าย อ่าน 39,150
ตัวอย่างต่อไป เป็นตัวอย่างการใช้งานอย่างง่าย สามารถนำไปประยุกต์ใช้ได้อย่างกว้างข
-
กำลังอ่านเนื้อหานี้อยู่08 Nov2014ประยุกต์การเลือกจาก listbox มากกว่า 2 รายการ ที่สัมพันธ์กัน อ่าน 21,674
แนวทางและโค้ดตัวอย่างต่อไปนี้ เป็นการประยุกต์ใช้งาน listbox หรือ แท็ก sel
-
27 Sep2016ประยุกต์การเลือก listbox มากกว่า 2 รายการ ที่สัมพันธ์กัน รองรับการแก้ไข อ่าน 10,273
เนื้อหานี้เป็นการประยุกต์ต่อยอดเพิ่มเติมจากบทความ ประยุกต์การเ
Tags::
listbox
URL สำหรับอ้างอิง
Top
Copy
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ