How to show dependent drop down list in forms?

[ashok893]

I'm using two drop down list in a form. I have generated the first drop down list from MySQL database with the help of PHP. When i select an option from first drop down list, i have to generate second drop down list options by the selected value of first drop down list from MySQL database.

For example, the first drop down list contains Animals, Birds... If i select the Animal option, the second drop down list should show like Lion, Tiger....

Both lists should be geneted from database only. Any script available for this?
What I have to do? Any one can help me?!

[monamac]

one way to approach this would be to refresh the page after the first dropdown item is selected by automatically submitting the form on the page to itself. for example:

<select name="category" onchange="document.forms['yourForm'].action='thisPhpFile.php';document.forms['yourForm'].submit();">
<option>animals</option>
<option>birds</option>
</select>

----------------

and at the top of the page you have some php that checks the 'category' parameter and selects from the correct database table accordingly:

if ($_POST['category'])
$category = $_POST['category'];

if ($category != '') {
$sql = "SELECT * FROM mytable WHERE category = '".$category."'";
(etc, etc, etc...)
}


and then build your second dropdown from that query, while setting the appropriate category on the first dropdown to be "SELECTED".
-----------------

i suppose another way to do it (depending on the amount of information you're dealing with) without refreshing the page would be to create a bunch of javascript arrays at the top of the page with your php, and then either:
1) dynamically build the second dropdown using javascript after the first dropdown has been selected or
2) build a bunch of dropdowns that are hidden and just show the appropriate one when the first dropdown has been selected.

however, if the arrays are too big, i would not recommend this method.

hope this helps.