GAJAX บทที่ 22 XML (ตำบล อำเภอ จังหวัด ด้วย GAJAX)

<?php
    // ค่าที่รับมา หรือค่าจังหวัด ตำบล อำเภอที่เลือก
    // หรือค่าที่อ่านได้จากฐานข้อมูล สำหรับแสดงเมื่อโหลดหน้าเพจครั้งแรก
    $city = $_GET[city];
    $amphur = $_GET[amphur];
    $tumbon = $_GET[tumbon];
?>

<p><select id="city" name="city"><option value="<?php echo $city?>">--เลือกจังหวัด--</option></select></p>
<p><select id="amphur" name="amphur"><option value="<?php echo $amphur?>">--เลือกอำเภอ--</option></select></p>
<p><select id="tumbon" name="tumbon"><option value="<?php echo $tumbon?>">--เลือกตำบล--</option></select></p>
<p><input type="submit" /></p>
</form>

<script type="text/javascript">
/* ฟังก์ชั่นนี้จะถูกเรียกเมื่อมีการเลือกรายการใน select ทุกตัว */
var doPrivonce = function(event) {
    var city =  $E('city');
    var amphur =  $E('amphur');
    var tumbon =  $E('tumbon');
    var src = GEvent.element(event); /* element ที่เป็นเจ้าของ event */
    if (!Object.isNull(src) && src.id == 'city') {
        /* event เมื่อเลือก จังหวัด */
        var query = 'city=' + city.value;
    } else if (!Object.isNull(src) && src.id == 'amphur') {
        /* event เมื่อเลือก อำเภอ */
        var query = 'city=' + city.value + '&amphur=' + amphur.value;
    } else {
        var query = 'city=' + city.value + '&amphur=' + amphur.value + '&tumbon=' + tumbon.value;
    };
    /* Ajax ส่งไปโหลด อำเภอและจังหวัด */
    var req = new GAjax();
    req.send('province.php' , query , function(xhr){
        /* รับค่ากลับมาในส่วนนี้ เป็น XML */
        /* <province> (root) */
        var provinceNode = xhr.responseXML.getElementsByTagName('province')[0];
        /* <city> */
        var cityNode = provinceNode.getElementsByTagName('city')[0];
        var items = cityNode.getElementsByTagName('*');
        populate(city, items, city.value);
        /* <amphur> */
        var amphurNode = provinceNode.getElementsByTagName('amphur')[0];
        var items = amphurNode.getElementsByTagName('*');
        populate(amphur, items, amphur.value);
        /* <tumbon> */
        var tumbonNode = provinceNode.getElementsByTagName('tumbon')[0];
        var items = tumbonNode.getElementsByTagName('*');
        populate(tumbon, items, tumbon.value);
    });
};

/* ฟังก์ชั่นสำหรับจัดการรายการต่างๆ (option) ใน select */
function populate(obj , items, select) {
    /* เคลียร์ข้อมูลเก่า เหลือไว้แค่รายการแรก*/
    for (var i = obj.options.length - 1 ; i > 0 ; i--) {
        obj.removeChild(obj.options[i]);
    };
    var selectedIndex = 0;
    /* เพิ่มรายการใหม่ */
    for (var i = 0 ; i < items.length ; i++) {
        var key = items[i].tagName.replace('a', '');
        selectedIndex = key == select ? i + 1 : selectedIndex;
        var option = document.createElement('option');
        option.innerHTML = items[i].firstChild.data;
        option.value = key;
        obj.appendChild(option);
    };
    /* เลือกรายการที่ต้องการ */
    obj.selectedIndex = selectedIndex;
    /* เคลียร์ค่าในรายการแรกที่ใส่ไว้ */
    obj.options[0].value = '';
};

/* เริ่มต้นทำงานครั้งแรกเมื่อโหลดหน้าเพจเสร้จ */
$G(document).Ready(function(){
    /* กำหนด event ให้กับ select แต่ละตัว */
    $G('city').addEvent('change',doPrivonce);
    $G('amphur').addEvent('change',doPrivonce);
    /* โหลดเพจครั้งแรก */
    doPrivonce(this);
});
</script>

<?php
    header("content-type: text/xml; charset=UTF-8");
    echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
    echo "<province>";
    // ค่าที่รับมา หรือค่าจังหวัด ตำบล อำเภอที่เลือก
    $city = $_POST[city];
    $amphur = $_POST[amphur];

    // ติดต่อฐานข้อมูล
    $hostname_conn = "localhost";
    $username_conn = "root";
    $password_conn = "";
    $database_conn = "province";
    mysql_connect($hostname_conn, $username_conn, $password_conn);
    mysql_query("SET NAMES utf8");
    mysql_select_db($database_conn); // เลือกฐานข้อมูล

    echo "<city>";
    $sql = "SELECT id, name FROM province";
    $result = mysql_query($sql);
    while ($fetcharr = mysql_fetch_array($result)) {
        echo "<a$fetcharr[id]>$fetcharr[name]</a$fetcharr[id]>";
    }
    echo "</city>";
    echo "<amphur>";
    $sql = "SELECT id, name FROM amphur WHERE provinceID='$city'";
    $result = mysql_query($sql);
    while ($fetcharr = mysql_fetch_array($result)) {
        echo "<a$fetcharr[id]>$fetcharr[name]</a$fetcharr[id]>";
    }
    echo "</amphur>";
    echo "<tumbon>";
    $sql = "SELECT id, name FROM tumbon WHERE amphurID='$amphur'";
    $result = mysql_query($sql);
    while ($fetcharr = mysql_fetch_array($result)) {
        echo "<a$fetcharr[id]>$fetcharr[name]</a$fetcharr[id]>";
    }
    echo "</tumbon>";
    echo "</province>";
    mysql_close();
?>