Need Help with Dynamic Drop Down Box

[happyman992]

Hi,

I have 2 questions. First, I am building a form with multiple drop down boxes. The options of the second drop down box will depend on what the user chooses on the first, options of the third drop down box depend on what they choose on the second, etc. The values of each option are inside a database which I can query for and put into a php array. I am wondering what is the easiest way to build this.

Second, when this form is completed, it should be viewable/editable by the user so it should be able to show the drop down menu with the selected options that the user chose. How would I be able to set the certain options for the drop down box to what the user chose and be able to make it dynamic again so they can make changes to what they chose.

Thanks for your help!

[dlite922]

@happyman992
Welcome to bytes happyman992,

Since PHP is serverside, the page must be refreshed to let PHP know what was selected in the parent dropdown box to fill the child (Unless you like to learn AJAX).

use the select box's onchange() method to submit the form when they select the first option. Use that to populate the second, do the same after they select an option from the second drop down to populate the third.

To show what was selected, when you populate the dropdown options insert an if statement in the loop to see if it's equal to the variable it was selected before the refresh, if it is include the "selected='selected'" attribute of the <options> tag. If it's not equal, then skip just display the option.

If you get stuck at any detail, come back to post your question.

Googling for: "PHP populating multiple select" (without the quotes) gives you some pretty good example of other people trying to do this and perhaps some tutorials and code for you to look at.

Best of luck,




Dan

[phpnewbie26]

Hi!

I've been looking around trying to figure out how onchange() and functions related to it works. Is it possible that you show an example of it being used. My problem is generating a parent child drop down menu both populated from an array and not a database. Thanks in advance.

[unauthorized]

Do you mean this:

$data = array("item1", "item2", "item3");
 
echo "<select>";
foreach($data as $item) echo "<option>$item</option>";
echo "</select>";

There is nothing difficult about it - it's a simple string concatenation. Am I missing something?

As for onchange, it's an event that you can respond by calling a javascript function.

<form name="form1">
<select name="select1" onchange="javascript: OnSelect1Changed()">
<!-- options go here --/>
</select></form>

You can then use this JS code:

function OnSelect1Changed() {
var selected = document.forms.form1.select1.selectedIndex;
// TODO: react on the selected item somehow
}

Dig up google if there is something you don't understand.