Truy xuất dữ liệu vào menu thả xuống ajax bằng PHP MySql JQuery

Ít ai nghĩ về mã của bạn

Với AJAX, hãy cố gắng sử dụng JSON để gửi và truy xuất dữ liệu, nó sẽ mang lại cho bạn sự tự do hơn về giao diện người dùng và giao diện người dùng.
Khi bạn đang sử dụng jQuery, hãy cố gắng sử dụng nó nhiều nhất có thể, không xác định các sự kiện trực tuyến, nếu bạn nhóm chúng trong tập lệnh, bạn sẽ dễ dàng quản lý nó hơn.
Về lựa chọn, việc tải lại chúng khá phức tạp. Trong IE, tôi nhớ rằng tôi không thể thêm tùy chọn, vì vậy, bạn phải tải lựa chọn TOÀN BỘ.
Không sử dụng các hàm mysql_query trong PHP, nó khá không được dùng nữa. Đọc và áp dụng điều này: Làm cách nào để ngăn chặn việc đưa vào SQL trong PHP?
Khi tải các giá trị từ AJAX, bạn phải đính kèm trình xử lý vào các phần tử DOM, đó là lý do tại sao sử dụng hàm .on (), để đảm bảo rằng nó gắn trình xử lý vào các phần tử.
Cố gắng sử dụng các thư viện mới hơn của jQuery, vì chúng nhanh hơn, mạnh mẽ và tăng hiệu suất, 1.4 là khá cũ ...

Tôi đã viết cho bạn một ví dụ về danh sách thả xuống của các quốc gia sử dụng những thứ ở trên, để cung cấp cho bạn manh mối về cách đạt được nó, hãy lấy những gì bạn nghĩ bạn thích nó:

index.html:

<html>

    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    </head>

    <body>

    <script>
    $(document).ready(function () {
        $(document).on('change', '#div_country select, #div_state select', function () {
            var $type = $(this).attr('data-type');
            var $id = $(this).val();

            if ( $id != -1 ) {
                loadSelect( $type, $id );
            }

        });

        function loadSelect( $type, $id ) {
            $.ajax({
                type: 'post',
                url: 'states.php',
                cache: false,
                data: {
                    'type': $type
                ,   'id': $id
                },
                dataType: 'json',
                success: function (data) {
                    if ( data.result == true ) {
                        if (data.html !== undefined) {
                            var $div = '';
                            if ( $type == 'country') {
                                $div = 'state';
                            } else {
                                $div = 'city';
                            }
                            $( "#div_" + $div ).html(data.html);
                        }
                    } else {
                        alert('Something went wrong!');
                    }
                }
            });
        }

    });
    </script>

    <div id="div_country">
        <select data-type="country">
            <option value="-1">Select Country</option>
            <option value="1">Spain</option>
            <option value="2">France</option>
            <option value="3">Germany</option>
        </select>
    </div>

    <div id="div_state">
        <select data-type="state">
            <option value="-1">Select Country</option>
        </select>
    </div>

    <div id="div_city">
        <select>
            <option value="-1">Select State</option>
        </select>
    </div>

    </body>
</html>

state.php

<?php
$type = isset( $_POST['type'] ) ? $_POST['type'] : '';

if ( !empty( $type ) ) {
    switch ($type) {
        case 'country':
            $result = true;
            $html = '<select data-type="state">
                        <option value="-1">Select State</option>
                        <option value="1">state 1</option>
                        <option value="2">state 2</option>
                    </select>';
        break;
        case 'state':
            $result = true;
            $html = '<select data-type="city">
                        <option value="-1">Select City</option>
                        <option value="1">city 1</option>
                        <option value="2">city 2</option>
                    </select>';
        break;
        default:
            $result = false;
            $html = '';
        break;
    }
}

$data = array(
    'result' => $result,
    'html' => $html
);

Tôi đã thêm vào để cung cấp cho bạn manh mối về cách đạt được nó, đây là một ví dụ độc lập và bạn sẽ thấy những thay đổi của dropbox. Bạn sẽ phải thêm logic PHP, nhưng tôi muốn chỉ cho bạn một cách tiếp cận tốt hơn, XD