กำหนดรายการใน listbox ที่ 2 จากเงื่อนไขการเลือก listbox ที่ 1 ด้วย ajax ใน jquery อย่างง่าย
เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdeelistbox ajax jquery
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ listbox ajax jquery
ดูแล้ว 39,150 ครั้ง
ไปที่
Copy
กรณีดึงจากฐานข้อมูล ให้เปลี่ยนมาใช้รูปแบบ mysqli แทน
https://www.ninenik.com/forum_view_2398_1.html#comment_5642
ตัวอย่างต่อไป เป็นตัวอย่างการใช้งานอย่างง่าย สามารถนำไปประยุกต์ใช้ได้อย่างกว้างขวาง เช่น ประยุกต์ใช้สำหรับ การเลือกจังหวัดในรายการ listbox ที่ 1 และให้แสดงอำเภอเฉพาะในจังหวัดที่เลือกใน listbox ที่ 2 หรืออื่นๆ เป็นต้น
ไฟล์ two_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> <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 }); }); }); </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_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); // ส่วนติดต่อกับฐานข้อมูล mysql_connect("localhost","root","test") or die("Cannot connect the Server"); mysql_select_db("test") or die("Cannot select database"); mysql_query("set character set utf8"); ?> <?php if(isset($_GET['list1']) && $_GET['list1']!=""){?> <option value="">เลือกรายการ</option> <?php $q="SELECT * FROM table WHERE field='".$_GET['list1']."' "; $qr=mysql_query($q); while($rs=mysql_fetch_array($qr)){ ?> <option value="<?=$rs['column_data_id']?>">เลือกรายการ <?=$rs['culumn_data']?></option> <?php } ?> <?php }else{ ?> <option value="">เลือกรายการ</option> <?php } ?>
เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 03-03-2019
กรณีดึงจากฐานข้อมูล ให้เปลี่ยนมาใช้รูปแบบ mysqli แทน
โดยดูแนวทางตัวอย่างได้ที่
https://www.ninenik.com/forum_view_2398_1.html#comment_5642
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
เนื้อหาที่เกี่ยวข้อง
-
กำลังอ่านเนื้อหานี้อยู่07 Jun2009กำหนดรายการใน listbox ที่ 2 จากเงื่อนไขการเลือก listbox ที่ 1 ด้วย ajax ใน jquery อย่างง่าย อ่าน 39,150
ตัวอย่างต่อไป เป็นตัวอย่างการใช้งานอย่างง่าย สามารถนำไปประยุกต์ใช้ได้อย่างกว้างข
-
08 Nov2014ประยุกต์การเลือกจาก listbox มากกว่า 2 รายการ ที่สัมพันธ์กัน อ่าน 21,673
แนวทางและโค้ดตัวอย่างต่อไปนี้ เป็นการประยุกต์ใช้งาน listbox หรือ แท็ก sel
-
27 Sep2016ประยุกต์การเลือก listbox มากกว่า 2 รายการ ที่สัมพันธ์กัน รองรับการแก้ไข อ่าน 10,273
เนื้อหานี้เป็นการประยุกต์ต่อยอดเพิ่มเติมจากบทความ ประยุกต์การเ
URL สำหรับอ้างอิง
Top
Copy
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ