กำหนดรายการใน listbox ที่ 2 จากเงื่อนไขการเลือก listbox ที่ 1 ด้วย ajax ใน jquery อย่างง่าย

ตัวอย่างต่อไป เป็นตัวอย่างการใช้งานอย่างง่าย สามารถนำไปประยุกต์ใช้ได้อย่างกว้างขวาง เช่น ประยุกต์ใช้สำหรับ การเลือกจังหวัดในรายการ listbox ที่ 1 และให้แสดงอำเภอเฉพาะในจังหวัดที่เลือกใน listbox ที่ 2 หรืออื่นๆ เป็นต้น

ไฟล์ two_listbox.php

<form id="form1" name="form1" method="post" action="">
  <p>ตัวเลือกที่1
    <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 />
ตัวเลือกที่2
<select name="list2" id="list2">
  <option value="">เลือกรายการ</option>
</select>
</p>
  <p>
    <input type="submit" name="button" id="button" value="Submit" />
</p>
</form>

Javascript Code แทรกในไฟล์ two_listbox.php

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
	$("select#list1").change(function(){
		var datalist2 = $.ajax({	// รับค่าจาก ajax เก็บไว้ที่ตัวแปร datalist2
			  url: "data_for_list2.php", // ไฟล์สำหรับการกำหนดเงื่อนไข
			  data:"list1="+$(this).val(), // ส่งตัวแปร GET ชื่อ list1 ให้มีค่าเท่ากับ ค่าของ list1
			  async: false
		}).responseText;		
		$("select#list2").html(datalist2); // นำค่า datalist2 มาแสดงใน listbox ที่ 2 ที่ชื่อ list2
		// ชื่อตัวแปร และ element ต่างๆ สามารถเปลี่ยนไปตามการกำหนด
	});
});
</script>

ไฟล์ data_for_list2.php

<?php
header("Content-type: application/xhtml+xml; charset=utf-8"); 
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>
<?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: application/xhtml+xml; charset=utf-8"); 
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
// ส่วนติดต่อกับฐานข้อมูล  
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 } ?>