Ajax Select Box Tỉnh thành

Trong bài này sẽ trình bày ví dụ minh họa ứng dụng Select Box tỉnh thành sử dụng kỹ thuật Ajax.

Khi người dùng select tỉnh thì sẽ hiển thị ra list danh sách các huyện tương ứng

Tạo file index.php có mã như sau:

    <?php
        require 'getListCity.php';
    ?>
    <html>
    <style type="text/css">
        select {
            padding: 3px;
            width: 40%;
        }
    </style>
    <head>
        <script>
            function showTownship(str) {
                if (str.length==0) {
                    document.getElementById("township").value="Chọn quận huyện";
                    return;
                }
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                } else {  // code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=function() {
                    if (this.readyState==4 && this.status==200) {
                        document.getElementById("township").innerHTML=this.responseText;
                    }
                }
                xmlhttp.open("GET","/gettownship.php?q="+str,true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>

    <form>
        <select onchange="showTownship(this.value)">
            <option value="0">Chọn tỉnh thành</option>
            <?php
                foreach(get_list_city_vn() as $city => $township) {
                    echo '<option value="'. $city .'">'. $city .'</option>';
                }
            ?>
        </select>
        <br /><br />
        <select id="township">
            <option value="0">Chọn quận huyện</option>
        </select>
    </form>
    </body>
    </html>

Giải thích: hàm showTownship() thực hiện như sau:

  • Chức năng showTownship() thực hiện như sau:
  • Tạo một đối tượng XMLHttpRequest
  • Sử dụng hàm onreadystatechange để lắng nghe các sự kiện từ máy chủ
  • Gửi yêu cầu tới tệp PHP (gettownship.php) trên máy chủ
  • Lưu ý rằng tham số q được thêm vào url (gettownship.php?q = " + str)
  • Và biến str chứa nội dung của trường đầu vào

Tệp PHP (gettownship.php) có mã như sau:

    require 'getListCity.php';
    $city = $_GET["q"];
    $c = false;
    foreach (get_list_city_vn() as $key => $value) {
        if(trim($key) == trim($city)) {
            foreach ($value as $township) {
                echo '';
            }
            $c = true;
        }
    }
    if(!$c){
        echo '';
        return;
    }

Giải thích:

  • Lấy giá trị từ index gửi qua gán vào biến $city
  • Code file getListCity.php chỉ là mảng danh sách tỉnh, quận huyện: Xem chi tiết
  • Sử dụng vòng lặp foreach so sánh, rồi đưa ra kết quả
Xem ví dụ »