jQuery: Dropdown option based off the previous dropdown selection
<p>I am trying to populate the second dropdown box based on the selection of the first. 
I did my research and found that most of the suggestions/solutions provided are pre loaded with dropdown values.</p>

<p>I am trying to access the database and get the values. I was able to pull this off in Javascript but i found that the Jquery solution would be effective as i have lot of items in the database. </p>

<p>So here is what i have so far. Any suggestions on how I can use MySQL queries to retrieve data from the database and autopopulate ?</p>

<pre><code>&lt;script type="text/javascript"&gt;
jQuery(document).ready(function($) {
    $(".countryDropDown").change(function() {
        var country = $(this).val();
        function fillStateDropDown(countryStateOption) {
            $.each(countryStateOption, function(val, text) {
                $('.stateDropDown').append(
                $('&lt;option&gt;&lt;/option&gt;').val(val).html(text));
            });
        }
        function clearStateDropDown() {
            $('.stateDropDown option:gt(0)').remove();
        }
        if (country == 'INDIA') {
            clearStateDropDown();
            var indiaStateOption = {
                RAJASTHAN: 'Rajasthan',
                GUJRAT: 'Gujrat',
                MAHARASTRA: 'Maharastra'
            };
            fillStateDropDown(indiaStateOption);
        }
        else if (country == 'UK') {
            clearStateDropDown();
            var ukStateOption = {
                LONDON: 'London',
                LIVERPOOL: 'Liverpool',
                DERBY: 'Derby'
            };
            fillStateDropDown(ukStateOption);
        }
        else if (country == 'USA') {
            clearStateDropDown();
            var usaStateOption = {
                CALIFORNIA: 'California',
                TEXAS: 'Texas',
                NEWYORK: 'New York'
            };
            fillStateDropDown(usaStateOption);
        }
        var stateOptions = {
            val1: 'text1',
            val2: 'text2'
        };
    });
});​
&lt;/script&gt;
</code></pre>
