Hämta data till ajax rullgardinsmeny med PHP MySql JQuery

Få tänker på din kod

Med AJAX, försök att använda JSON för att skicka och hämta data, det kommer att ge dig mer frihet när det gäller vars och UI.
När du använder jQuery, försök att använda det så mycket som möjligt, inte definiera onlinehändelser, om du grupperar dem i skriptet blir det lättare för dig att hantera det.
Om de utvalda, det är ganska knepigt att ladda om dem. I IE minns jag att jag inte kunde lägga till alternativ, så du måste ladda HELA urvalet.
Använd inte PHP mysql_query funktioner, är ganska föråldrade. Läs och tillämpa detta: Hur kan jag förhindra SQL-injektion i PHP?
När du laddar värden från AJAX måste du koppla hanteraren till DOM-elementen, det är därför du använder .on()-funktionen, för att se till att den kopplar hanteraren till elementen.
Försök att använda de nyare biblioteken i jQuery, eftersom de är snabbare, kraftfulla och har ökad prestanda, 1.4 är ganska gammalt...

Jag har skrivit till dig ett exempel på nedrullningsbara länder som använder ovanstående saker, för att ge dig en aning om hur du uppnår det, ta det du tror att du gillar:

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

Jag har lagt till för att ge dig en ledtråd om hur du uppnår det, det är ett fristående exempel, och du kommer att se ändringarna i dropboxen. Du måste lägga till PHP-logiken, men jag ville visa dig ett bättre tillvägagångssätt, XD