php dropdown menu population

Question

I'm trying to write a php script that will populate a second drop down menu based on the selection of the a primary drop down menu. I would like to use jquery to do all the non-page refresh stuff. but every thing that I find that exists out there is hard to understand and modify, do you know of anything that was well written and easy to understand or maybe a tutorial that exists out there?

Answer 1

There are quite a few examples of how to do this on the web, a good one here from Remy Sharp on his blog (full example here)

Basically what you're doing is calling a PHP page on your server with the value of your first drop-down whenever it is changed. For example, if your first drop down is a list of states in the US, your second drop-down may show cities in the chosen state. When the first drop down is selected, it's onChange event fires off a request to a PHP page on your server, passing the state name (example.com/city_lookup.php?state=NY)

The JQuery then receives the response from the city_lookup script (JSON encoded is probably the best way to go here), then cycles through it and writes the values to your second drop-down menu.

Answer 2

Add one more line jQuery('#city').html('');
Now the code look like :

jQuery(document).ready(function() {

    jQuery('#state').change(function() {

          jQuery('#city').html('');   
          jQuery.post(
                'some-url.php',
                {
                        'state':jQuery('#state').val()
                },
                function(data, textStatus) {
                        jQuery.each(data, function(index, value) {
                                jQuery('#city').append('<option value="' + value + '">' + value + '</option>');
                        });
                },
                'json'
        );
    });

});

Answer 3

Here's some code that should give you an idea of what you want to do:

HTML

<select id="state" name="state">
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
</select>
<select id="city" name="city">
    <option value="">Please select a state...</option>
</select>

PHP

<?php
    $cities = array(
        'IL' => array( 'Chicago', 'Naperville', 'Decatur', 'Saint Charles' ),
        'IN' => array( 'Gary', 'Miller', 'Portage', 'Merrillville' )
    );

    print json_encode( $cities[ $_POST[ 'state' ] ] );
    exit;
?>

jQuery

jQuery(document).ready(function() {

    jQuery('#state').change(function() {
        jQuery.post(
            'some-url.php',
            {
                'state':jQuery('#state').val()
            },
            function(data, textStatus) {
                jQuery.each(data, function(index, value) {
                    jQuery('#city').append('<option value="' + value + '">' + value + '</option>');
                });
            },
            'json'
        );
    });

});

Answer 4

two different ways:

• make the first level trigger AJAX queries that return the data needed for the second level
• write a tree structure with all the needed data for all possible selections, and hide it somewhere in the initial page where your Javascript can read it. Either the finished HTML menus (hide and show as needed) or in a big JSON object in the JS part.