homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

ajax multi drop down

10+ Year Member

Msg#: 3081935 posted 7:42 pm on Sep 13, 2006 (gmt 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.



10+ Year Member

Msg#: 3081935 posted 1:27 am on Sep 22, 2006 (gmt 0)

Been googling and googling on this one without help!


WebmasterWorld Senior Member 10+ Year Member

Msg#: 3081935 posted 12:36 pm on Sep 22, 2006 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved