ตัวอย่างต่อไป เป็นตัวอย่างการใช้งานอย่างง่าย สามารถนำไปประยุกต์ใช้ได้อย่างกว้างขวาง เช่น ประยุกต์ใช้สำหรับ การเลือกจังหวัดในรายการ 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 } ?>