Dynamically populated Dropdown Lists based on Selection in another Dropdown List.
It's me again.
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 posted this at 03:30 — 14th September 2010.
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).
Dami posted this at 04:12 — 14th September 2010.
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!
teammatt3 posted this at 16:06 — 14th September 2010.
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
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.
Dami posted this at 16:24 — 14th September 2010.
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.