Dynamic Drop Downs PHP AJAX

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View


Im new to AJAX and PHP. Ive managed to create a two dynamic dropdowns
that manage to grab data from the database and use the value from the
first dropdown inside the SQL query to populate the second one.

However I need to be able to add more dropdown boxes and retain all
values selected so that i can use them in multiple different queries.
With about 6 dependant dropdowns in total.

I was wondering if anyone can point me in the right direction into
adding aditional dropdowns. Ive been scowering the net with ways to do
this however I don't know javascript very well. And im wondering if
someone can help me by looking at my code and letting me know what
needs to be added.

There are two fils.
local_dropdown.php and state.php

here is local_dropdown


     echo "<form name=sel>\n";
     echo "Type : <font id=type><select>\n";
     echo "<option value=''>============</option> \n" ;
     echo "</select></font>\n";

     echo "Quality : <font id=quality><select>\n";
     echo "<option value=''>=== none ===</option> \n" ;
     echo "</select></font>\n";

     echo "Quality : <font id=count><select>\n";
     echo "<option value=''>=== none ===</option> \n" ;
     echo "</select></font>\n";

<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //
try { return new XMLHttpRequest();          } catch(e) {} //Native
alert("XMLHttpRequest not supported");
return null;

function dochange(src, val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
 if (req.readyState==4) {
      if (req.status==200) {
           document.getElementById(src).innerHTML=req.responseText; //
retuen value
req.open("GET", "state.php?data="+src+"&val="+val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-
urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value

window.onLoad=dochange('type', -1);         // value in first dropdown


and here is state.php
(youll notice the code i tried to use for the 3rd dropdown is
commented out because i couldn't get it to function correctly.

//set IE read from page only not read from cache
//header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
//header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
////header ("Cache-Control: no-cache, must-revalidate");
//header ("Pragma: no-cache");

//header("content-type: application/x-javascript; charset=tis-620");


//set database
@mysql_select_db($database) or die( "Unable to select database");

if ($data=='type') {  // first dropdown
  echo "<select name='type' onChange=\"dochange('quality', this.value)
  echo "<option value=''>==== choose type ====</option>\n";
  $result=mysql_db_query($database,"SELECT DISTINCT type FROM prod");
       echo "<option value=\"$type\" >$type</option> \n" ;
} else if ($data=='quality') { // second dropdown
  echo "<select name='quality' >\n";
  echo "<option value=''>====choose quality ====</option>\n";
  //$val = substr($val,0,2);
  $result=mysql_db_query($database,"SELECT DISTINCT quality FROM prod
WHERE type='".$val."'");
       echo "<option value=\"$$quality\" >$quality</option> \n" ;
/* } else if ($data=='count') { // third dropdown
  echo "<select name='count' >\n";
  echo "<option value=''>====choose count ====</option>\n";
  $val = substr($val,0,4);
  $result=mysql_db_query($database,"SELECT DISTINCT count FROM prod
WHERE type='".$val2."' && quality='".$val."'");
       echo "<option value=\"$count\" >$count</option> \n" ;
  } */
echo "</select>\n";


Any and all help appreciated.

Thanks in advance!!!

Re: Dynamic Drop Downs PHP AJAX

Marc A. wrote:
Quoted text here. Click to load it

And your PHP question is?

If you're having javascript problems (which AJAX is), try

Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.

Re: Dynamic Drop Downs PHP AJAX


on 02/16/2010 06:27 PM Marc A. said the following:
Quoted text here. Click to load it

You may want to try this forms class that comes with a plug-in precisely
for that: linking an unlimited number of select inputs with groups of
options retrieved from MySQL or any other database depending on the
previous select value. It supports updating options using AJAX to avoid
page reloading.


Take a look here to see a live example:


Here you may watch a tutorial video about this plug-in:



Manuel Lemos

Find and post PHP jobs
http://www.phpclasses.org/jobs /

PHP Classes - Free ready to use OOP components written in PHP
http://www.phpclasses.org /

Site Timeline