Haal gegevens op in het ajax-vervolgkeuzemenu met behulp van PHP MySql JQuery

Weinigen denken aan je code

Probeer met AJAX JSON te gebruiken om gegevens te verzenden en op te halen, het geeft je meer vrijheid over vars en gebruikersinterface.
Als je jQuery gebruikt, probeer het dan zoveel mogelijk te gebruiken, en definieer geen online evenementen. Als je ze in het script groepeert, zal het gemakkelijker voor je zijn om het te beheren.
Wat betreft de select, het is best lastig om ze opnieuw te laden. Ik herinner me dat ik in IE geen opties kon toevoegen, dus je moet de HELE selectie laden.
Gebruik geen PHP mysql_query-functies, deze zijn behoorlijk verouderd. Lees en pas dit toe: Hoe kan ik SQL-injectie in PHP voorkomen?
Wanneer u waarden uit AJAX laadt, moet u de handler aan de DOM-elementen koppelen, daarom gebruikt u de functie .on() om ervoor te zorgen dat de handler wel aan de elementen wordt gekoppeld.
Probeer de nieuwere bibliotheken van jQuery te gebruiken, omdat ze sneller en krachtiger zijn en betere prestaties hebben, 1.4 is behoorlijk oud...

Ik heb je een voorbeeld geschreven van een vervolgkeuzelijst van landen die bovenstaande dingen gebruiken, om je een idee te geven van hoe je dit kunt bereiken, neem wat je denkt dat je leuk vindt:

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>

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

Ik heb toegevoegd om je een idee te geven over hoe je dit kunt bereiken, het is een op zichzelf staand voorbeeld en je zult de veranderingen van de dropbox zien. Je moet de PHP-logica toevoegen, maar ik wilde je een betere aanpak laten zien, XD