Dynamically populated Dropdown Lists based on Selection in another Dropdown List.

She has: 88 posts

Joined: Sep 2001

It's me again. Smiling

Still working on my used car web site. I'm creating a form where the site administrator can edit the categories and features in a single lookup table. I have two dropdown lists, one for feature categories (airbags, drive trains, sound systems, etc.) and the other is specific features that are in those categories (airbags: driver, passenger, side; drive train: front wheel drive, rear wheel drive, etc.). When the user selects a category, I want the features dropdown to be dynamically populated based on the selected category.

I can get both dropdowns populated independently, but I can't get my head around how to make them interdependent. Here's what I have so far:

    <tr>
<td width="145">Category:</td>
        <td colspan="2">
    <select name="feat_category" id="feat_category">
<option value="" selected>Select a Category</option>

    <?php

        $query
= "SELECT `category` FROM `features` ORDER BY `category` ASC";
       
//    die(print_r($query));
       
$result = mysql_query($query) or DIE (mysql_error());

        while (
$option = mysql_fetch_array($result)) {
        echo
"            <option value=\"". $option['category']."\">". $option['category']."</option>\n";
        }
       
?>

    </select>
        </td>
    </tr>
    <tr>
        <td width="145">Change this feature </td>
<td>
    <select name="feature" id="feature">
<option value="" selected>Select a Feature</option>

    <?php

        $query
= "SELECT `feature` FROM `features` ORDER BY `category`,`feature` ASC";
       
//    die(print_r($query));
       
$result = mysql_query($query) or DIE (mysql_error());

        while (
$option = mysql_fetch_array($result)) {
        echo
"            <option value=\"". $option['feature']."\">". $option['feature']."</option>\n";
        }
       
?>

    </select>
</td>
<td>to: <input type="text" id="edit_feat" name="edit_feat"></td>
    </tr>

Any suggestions on how to accomplish this?

TIA
Dami

teammatt3's picture

He has: 2,102 posts

Joined: Sep 2003

I don't think you can accomplish that without using JavaScript. JavaScript can be painful, especially if you are new to it.

Have you thought about displaying all the categories and features in a table with radio buttons?

+---------------------+-------------------+---------------------+
| Category 1          |  Category 2       |  Category 3         |
|  o Power Steering   |   o 4 wheel drive |   o Battery warmer  |
|  o Air conditioning |   o Hybrid        |   o LED headlights  |
+---------------------+-------------------+---------------------+
| Category 4          |
|  o Trunk monkey     |
+---------------------+

That is easier to write and it is more usable (I hate drop down boxes).

She has: 88 posts

Joined: Sep 2001

The purpose of this form is so the site admin can edit the table contents, like changing the category and/or feature. Is there any way for JS to trigger a mysql query? Example, using the onChange event of the category to trigger the query to populate the features based on the selected item in category?

My other option is to list both category and feature in one drop down, but make the text field only change the feature. Not an elegant solution....

Thanks so much for looking over my problem! Smiling

teammatt3's picture

He has: 2,102 posts

Joined: Sep 2003

Oh, now I see. You are changing the name of a feature. I missed the boat on that Smiling

Is there any way for JS to trigger a mysql query?

Indirectly, yes. You need to make a call to PHP using an AJAX request.

If you are willing to use jQuery, you can use code like:

// Attach events after the DOM is fully loaded
$(document).ready(function(){
    // create a change event on your main select box
    $('#feat_category').bind('change', function(){
        // get the category_id from the drop down
        var category_id = $(this).val();
   
        // make a call to features_for_category.php with a GET parameter called category_id that contains
        // the category_id. Your PHP code only needs to generate a select box for the features in that
        // category
        $.get('/features_for_category.php', {'category_id' : category_id}, function(select_box){
            // get the content of your PHP script (a select box) and insert it into the page (you need
            // to create a new div called #features-drop-down-wrapper in your HTML
            $('#features-drop-down-wrapper').html(select_box);
        });
    });
});

There are a half dozen things going on in that code, but hopefully you get the gist of what is happening.

She has: 88 posts

Joined: Sep 2001

Holy cow, thank you SO much! I'm already using a little jQuery for some field visibility toggling, so this should work fine!

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.