Rufen Sie Daten mit PHP MySql JQuery in das Ajax-Dropdown-Menü ab

Nur wenige denken über Ihren Code nach

Versuchen Sie mit AJAX, JSON zu verwenden, um Daten zu senden und abzurufen, es wird Ihnen mehr Freiheit in Bezug auf Variablen und Benutzeroberflächen geben.
Wenn Sie jQuery verwenden, versuchen Sie, es so oft wie möglich zu verwenden, und definieren Sie keine Online-Ereignisse. Wenn Sie sie im Skript gruppieren, ist es für Sie einfacher, es zu verwalten.
Über die Auswahl ist es ziemlich schwierig, sie neu zu laden. Ich erinnere mich, dass ich im IE keine Optionen hinzufügen konnte, also müssen Sie die GANZE Auswahl laden.
Verwenden Sie keine PHP mysql_query-Funktionen, sind ziemlich veraltet. Lesen und anwenden: Wie kann ich SQL-Injection in PHP verhindern?
Wenn Sie Werte aus AJAX laden, müssen Sie den Handler an die DOM-Elemente anhängen, deshalb verwenden Sie die Funktion .on(), um sicherzustellen, dass der Handler an die Elemente angehängt wird.
Versuchen Sie, die neueren Bibliotheken von jQuery zu verwenden, da sie schneller, leistungsfähiger und leistungsfähiger sind, 1.4 ist ziemlich alt ...

Ich habe Ihnen ein Beispiel für ein Dropdown-Menü von Ländern geschrieben, die die obigen Dinge verwenden, um Ihnen einen Hinweis darauf zu geben, wie Sie es erreichen können. Nehmen Sie, was Ihnen gefällt:

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
);

Ich habe hinzugefügt, um Ihnen einen Hinweis darauf zu geben, wie Sie dies erreichen können. Es handelt sich um ein eigenständiges Beispiel, und Sie werden die Änderungen der Dropbox sehen. Sie müssen die PHP-Logik hinzufügen, aber ich wollte Ihnen einen besseren Ansatz zeigen, XD