Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

ajax multi drop down

7:42 pm on Sep 13, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 29, 2004
votes: 0

Hello all Ajax Gurus, after a long and frustrating googling I come to ask for your help.

I want to get started with AJAX by doing the following:

I need three dependent drop down boxes, first one is filled with data from my mysql DB (having it's first options as "select one").

When the first drop down changes, the second gets populated with data from my DB.

And then when something is selected in the second drop down, the third drop down gets populated with data from my DB.

To give you an example.

The first drop down is filled with car manufacturers.
After you chose one, the second drop down gets filled with model's of that car manufacturer. And when you select a model the third gets filled with the available years of that specific model.

I found some code but is for ASP or PHP and a text file, but I need to solve this using PHP and mysql.

1:27 am on Sept 22, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 29, 2004
votes: 0

Been googling and googling on this one without help!
12:36 pm on Sept 22, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 22, 2002
votes: 0

Let's do this in two steps: first, have the server send us a nice set of options to use in the select box; second, build the select box.

1. Your PHP script receives a request with a manufacturerID.

if (is_numeric(@$_GET['manufacturerID'])) {
// create an XML document
$doc = new DOMDocument ('1.0', 'ISO-8859-1');
// create root-element
$root = $doc->createElement('root');
$root = $doc->appendChild($root);
$doc->preserveWhiteSpace = true;
// query the database
$rs = mysql_query("SELECT id, model FROM models WHERE manufacturerID = $_GET[manufacturerID]");
// now create an option element for each record
while ($row = mysql_fetch_assoc($rs)) {
// attach a new option to the root element
$opt = $root->appendChild($doc->createElement('option'));
// create id element, attach it to the option element
$elId = $opt->appendChild($doc->createElement('id'));
// add textnode to it, containing the model's id
// do the same for the model
$elModel = $opt->appendChild($doc->createElement('model'));
$result = $doc->saveXML();
header('Content-type: application/xml; charset=utf-8');
echo $result;

This should return an xml document that looks more or less like this:
<?xml version="1.0"?> 

2. In your JavaScript that sends the XmlHttpRequest, you've set a method called buildSelectBox as the onreadystatechange handler. The name of your request object is myreq.

function buildSelectBox() { 
if (myreq.readyState == 4) {
// create a select element
var sbox = document.createElement('select');
sbox.name = 'models';
// give it an onchange handler
sbox.onchange = 'getAvailableYears';
// now add the options
var opts = myreq.responseXML.getElementsByTagName('option');
for (var i = 0; i < opts.length; i++) {
var op = new Option(
false, false);
sbox.options[sbox.length] = op;
// add the select box to an existing element on the page

I haven't really tested all this, but it should get you going.


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members