PHP - MySQL - jQuery จังหวัด อำเภอ ตำบล - CakePHP

บทความนี้ช่วยให้เราสามารถเขียนโปรแกรมด้วย PHP ในฟอร์มกรอกข้อมูลให้สะดวกรวดเร็วมากยิ่งขึ้นโดย

หลังจากที่เลือกจังหวัดแล้ว จะแสดงรายการของอำเภอที่อยู่ในจังหวัดนั้น และหลังจากที่เลือกอำเภอแล้วก็จะแสดงตำบลในอำเภอนั้นอีกด้วยทำให้สะดวกต่อการกรอกข้อมูล

ความต้องการ

jQuery

form.php

<?php
include("conn_db.php");
?>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("select#province").change(function(){
  var datalist2 = $.ajax({ // รับค่าจาก ajax เก็บไว้ที่ตัวแปร datalist2
     url: "amphur.php", // ไฟล์สำหรับการกำหนดเงื่อนไข
     data:"province_id="+$(this).val(), // ส่งตัวแปร GET ชื่อ province ให้มีค่าเท่ากับ ค่าของ province
     async: false
  }).responseText;
  $("select#amphur").html(datalist2); // นำค่า datalist2 มาแสดงใน listbox ที่ 2 ที่ชื่อ amphur
  // ชื่อตัวแปร และ element ต่างๆ สามารถเปลี่ยนไปตามการกำหนด
});
});
$(function(){
$("select#amphur").change(function(){
  var datalist3 = $.ajax({ // รับค่าจาก ajax เก็บไว้ที่ตัวแปร datalist3
     url: "tambol.php", // ไฟล์สำหรับการกำหนดเงื่อนไข
     data:"amphur_id="+$(this).val(), // ส่งตัวแปร GET ชื่อ amphur ให้มีค่าเท่ากับ ค่าของ amphur
     async: false
  }).responseText;
  $("select#tambol").html(datalist3); // นำค่า datalist2 มาแสดงใน listbox ที่ 3 ที่ชื่อ tambol
  // ชื่อตัวแปร และ element ต่างๆ สามารถเปลี่ยนไปตามการกำหนด
});
});
</script>
<h2>แบบฟอร์มสมัครสมาชิก </h2>
<form action="?" method="post" name="signup_form">
<table width="100%">
<?php
   $sql="SELECT * FROM tbl_province ORDER BY province_name ASC";
   $result=mysql_query($sql);

   ?>
              <td align="right">จังหวัด</td>
              <td><select name="province" id="province">
              <option value="0">-- เลือกจังหวัด --</option>
              <?php while($rs=mysql_fetch_array($result)){ ?>
                <option value="<?php echo $rs['province_id'];?>"><?php echo $rs['province_name'];?></option>
              <?php } ?>
              </select></td>
            </tr>
            <tr>
              <td align="right">อำเภอ</td>
              <td><select name="amphur" id="amphur">
                <option value="0">-- เลือกอำเภอ --</option>
              </select></td>
            </tr>
            <tr>
              <td align="right">ตำบล</td>
              <td><select name="tambol" id="tambol">
                <option value="0">-- เลือกตำบล --</option>
              </select></td>
            </tr>
</table>
<?php
include("close_db.php");
?>

------------------------------------------------------------

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

include("conn_db.php");
$province_id = $_GET['province_id'];

$sql= "SELECT * FROM tbl_amphur WHERE province_id = ". $province_id ." ORDER BY amphur_name ASC";
$result = mysql_query($sql);

if(isset($_GET['province_id']) && $_GET['province_id']!=""){
?>
    <option value="">เลือกรายการ</option>
    <?php while($rs=mysql_fetch_array($result)){ ?>
    <option value="<?php echo $rs['amphur_id'];?>"><?php echo $rs['amphur_name'];?></option>
    <?php } ?>
<?php }else{ ?>
    <option value="">เลือกรายการ</option>
<?php } ?>

-------------------------------------------------------------------

tambol.php

include("conn_db.php");
$amphur_id = $_GET['amphur_id'];

$sql= "SELECT * FROM tbl_district WHERE amphur_id = ".$amphur_id." ORDER BY district_name ASC";
$result = mysql_query($sql);

if(isset($_GET['amphur_id']) && $_GET['amphur_id']!=""){
?>
    <option value="">เลือกรายการ</option>
    <?php while($rs=mysql_fetch_array($result)){ ?>
    <option value="<?php echo $rs['district_id'];?>"><?php echo $rs['district_name'];?></option>
    <?php } ?>
<?php }else{ ?>
    <option value="">เลือกรายการ</option>
<?php } ?>

เพียงเท่านี้ก็สามารถเลือก จังหวัด อำเภอ และตำบลได้แล้ว