version 4.1.0

สร้าง DropDownList AJAX ตำบล อำเภอ จังหวัด

  พฤหัสบดีที่ 19 มีนาคม พ.ศ. 2558 เวลา 09:44:46 น.      13,831 ครั้ง


สร้าง DropDownList AJAX ตำบล อำเภอ จังหวัด

เตรียมข้อมูลให้พร้อม

รูปภาพตัวอย่างไฟล์ทั้งหมด

รูปภาพตัวอย่างไฟล์ทั้งหมด

รูปภาพที่ 1 | รูปภาพตัวอย่างไฟล์ทั้งหมด



ตัวอย่างคำสั่งไฟล์ "amphoe.php"

 include_once 'DB.php';

if(!empty($_POST['province'])){
    $database = new DB();
    $result = $database->query("SELECT * FROM tbl_amphur WHERE PROVINCE_ID = " . $_POST['province'])->findAll();
    if(!empty($result)){
        foreach ($result as $value) {
            echo '';
        }
    }else{
        return false;
    }
}
exit();

ไฟล์ "amphoe.php" ใช้สำหรับแสดงข้อมูล รายการอำเภอ ที่ตรงตาม "รหัสจังหวัด"

ตัวอย่างคำสั่งไฟล์ "district.php"

 include_once 'DB.php';

if(!empty($_POST['amphoe'])){
    $database = new DB();
    $result = $database->query("SELECT * FROM tbl_district WHERE AMPHUR_ID = " . $_POST['amphoe'])->findAll();
    if(!empty($result)){
        foreach ($result as $value) {
            echo '';
        }
    }else{
        return false;
    }
}
exit();

ไฟล์ "district.php" ใช้สำหรับแสดงข้อมูล รายการตำบล ที่ตรงตาม "รหัสอำเภอ"



ตัวอย่างคำสั่ง

 
include_once 'DB.php';

$database = new DB();
$result =  $database->query("SELECT * FROM tbl_province")->findAll();

// ตรวจสอบ
if(!empty($result)){
    // พบข้อมูล
    echo '<label>   จังหวัด : </label>';
    echo '<select id="province" name="province">';
    foreach ($result as $province) {
       echo '<option value="' . $province->PROVINCE_ID . '">' . $province->PROVINCE_NAME . '</option>';
    }
    echo '</select>';
}

// อำเภอ
echo '<label>   อำเภอ : </label>';
echo '<select id="amphoe" name="amphoe">';
    echo '<option value=""> --- กรุณาเลือกจังหวัด (ก่อน) --- </option>';
echo '</select>';


// ตำบล
echo '<label>   ตำบล : </label>';
echo '<select id="district" name="district">';
    echo '<option value=""> --- กรุณาเลือกอำเภอ (ก่อน) --- </option>';
echo '</select>';
                        
                    

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 2 | รูปภาพตัวอย่าง

หลังจากสร้าง DropDownList เรียบร้อยแล้ว ต่อไปเราก็จะเขียนคำสั่ง Ajax ที่ใช้สำหรับการดึงข้อมูล อำเภอและตำบล ออกมาแสดง

ตัวอย่างคำสั่ง กรณี ยังไม่ได้ Import ไฟล์ jQuery เข้ามา

 
<head> 

    <!-- ...... -->

    <!-- Import ไฟล์ jQuery -->
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 

</head>

แทรกคำสั่ง Import ไฟล์ jQuery ลงในส่วนของ <head><head> กรณีที่เรา ยังไม่ได้ Import ไฟล์ jQuery เข้ามา

คำสั่ง Ajax ดึงข้อมูล อำเภอและตำบล ออกมาแสดง

 <script type="text/javascript">
    jQuery(function($) {
        jQuery('body').on('change','#province',function(){
            jQuery.ajax({
                'type':'POST',
                'url':'http://localhost/basic_test/amphoe.php',
                'cache':false,
                'data':{province:jQuery(this).val()},
                'success':function(html){
                    jQuery("#amphoe").html(html);
                }
            });
            return false;
        });
         jQuery('body').on('change','#amphoe',function(){
            jQuery.ajax({
                'type':'POST',
                'url':'http://localhost/basic_test/district.php',
                'cache':false,
                'data':{amphoe:jQuery(this).val()},
                'success':function(html){
                    jQuery("#district").html(html);
                }
            });
            return false;
        });
    });
</script>

</body>

เขียนคำสั่ง ajax ดึงข้อมูล ตำบลและอำเภอ ไว้ในตำแหน่งบน tag </body> ภายในไฟล์ "index.php"

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 3 | รูปภาพตัวอย่าง

พิมพ์ Url http://localhost/basic_test/ ทดสอบได้เลย




นักแปล / นักเขียน / เรียบเรียง

author

เอกบิณ ใจแก้วมา (แม็ก)

"โปรแกรมเมอร์ตัวเล็ก ๆ" สะสมประสบการณ์ด้านการพัฒนาซอฟแวร์มามากกว่า 11 ปี
# ติดตามผลงานได้ที่ | พบกับเราที่ Google+ | Facebook






Comment