Dropdown list where options populate a second list js/php? - php

Question

I have a 2 dropdown lists side by side. When user selects from the first list, i need the second list's options to be displayed.
The sub-options will be retrieved from a database. I have a page that will return the necessary html given the specific parent. I just need the first list's selection to trigger an update of list #2.
Whats the best way of accomplishing this?
<select id="parent" name="list1">
<option value="1">Parent 1</option>
<option value="2">Parent 2</option>
<option value="3">Parent 3</option>
<option value="4">Parent 4</option>
</select>
<select id="child" name="list2">
</select>
caveat: cant use a form, cause the selection's are part of another form.

Answer 1

The normal way to do this is to do an AJAX request after the first dropdown is selected to retrieve the contents of the second.
Exactly how you do that will depend on the frameworks/libraries you're using, but here's an example of a jQuery plugin designed for it:
jQuery cascade plugin
There's also a number of related questions on SO that may help:
https://stackoverflow.com/search?q=cascading+dropdown

Answer 2

Use the event onchange of the select to call an ajax function to retrieve the new data

Answer 3

A dead simple way is to set up your script to output the entire markup of the generated select list, and inject that into a wrapper element, e.g.:
<div id="wrapper">
<select id="child" name="list2">
</select>
</div>
$("#parent').change(function() {
$('#wrapper').load('getSelect.php','selection=' + $(this).val());
return false; // may or may not be needed
});