Populating a Dropdown from PHP/MySQL table and then using those to create the next Dropdown from another MySQL table

Populating a Dropdown from PHP/MySQL table and then using those to create the next Dropdown from another MySQL table

Hello all,

I am a PHP programmer learning jquery (and JavaScript in general).

I have a form that I am trying to create for our Customer Service people that will list the videos we give away to teachers and schools.

Then once they choose the video, I need a series for new drop-downs with Category, usage, etc (each of these drop downs values, change based on the previous menu item).

So the video dropdown brings up a list for the next dropdown and on and on.

All the data for these dropdowns are in MySQL and related with foreign keys, I have no issues with getting the values from my queries. I am stuck on getting one dropdown to populate the next one.

I managed to find a tutorial on a States drop down, that then shows the counties in that state. Here is the code (after I modified it to get the data from MySQL).


  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
  2. <?php
    $counties = array(1 => "Erie", 2 => 'Pittsburgh');
    echo "<script type=\"text/javascript\">\n";
    echo "function populate(form) {\n";
    echo "form.options.length = 0;\n";
    echo "form.options[0] = new Option(\"Select a county\",\"\");\n";




  3. foreach ($counties as $countyID => $county ){
        echo "form.options[$countyID] = new Option(" . '"' . $countyID . '","' . $county . '"' . ");\n";
    }

    echo "}\n";
    echo "</script>\n";
    ?>





  4. Note: this php code is used to create the javascript for that looked like this:
  5. <script type="text/javascript">
    function populate(form) {
    form.options.length = 0;
    form.options[0] = new Option("Select a county","");
    form.options[0] = new Option("1","Erie");
    form.options[1] = new Option("2","Pittsburgh");
    }
    </script>








  6. <script type="text/javascript" src="js/drop_down.js"></script>
  7. (this is the drop_down.js code)
    function drop_down_list()
    {
        var state = $('#state').val();

        if(state == 'AK' || state == 'DC') // Alaska and District Columbia have no counties
        {
        $('#county_drop_down').hide();
        $('#no_county_drop_down').show();
        }
        else
        {
        $('#loading_county_drop_down').show(); // Show the Loading...
       
        $('#county_drop_down').hide(); // Hide the drop down
        $('#no_county_drop_down').hide(); // Hide the "no counties" message (if it's the case)

       
    //    $.getScript("js/states/"+ state.toLowerCase() +".js", function(){

        $.getScript("js/states/"+ state.toLowerCase() +".php", function(){

        populate(document.form.county);

         $('#loading_county_drop_down').hide(); // Hide the Loading...
        $('#county_drop_down').show(); // Show the drop down
        });
    }
    }

    $(document).ready(function(){
    $("#state").change(drop_down_list);
    });

    $(window).load(drop_down_list);

































The challenge I had here was if I use a key->value method for the array ($counties = array(1 => "Erie", 2 => 'Pittsburgh') I should get "Pittsburgh" for the menu item and 1 for the index, instead I get 1 for the menu value.

And I dont understand how to use this to populate the next drop down from these choices.

One more note, to complicate this, some of the 1st and 2nd drop downs, will not lead to another menu (IE, if its a donation type, in the 1st menu, then I wont need to go any further). I usually handle these with either a switch or if(isset) type code. Just an fyi it that helps or hinders this.

If I am not clear, please let me know, and I appreciate the assistance in advance.

Regards,
Don