Go Premium for a chance to win a PS4. Enter to Win


AJAX PHP drop down boxes

Posted on 2009-06-30
Medium Priority
Last Modified: 2012-05-07
I have an issue that is causing me a great deal of problems.  I have this code and am trying to make it work for my needs.  Attached is the code that makes it work.  The idea is that there are 3 drop down boxes.  One populates the other and so on.  I have the first drop down populated with little problem however I am having issues formatting the queries and the while statements to make it work.  The config file contains all the code I am editing and contains examples of how it is supposed to work.  It is over my head I suppose because I can't seem to figure this out.  As an example the Toyota selection works by static means of the config file.
I am not a programmer but I do have somewhat an understanding of how this should work.  I simply can't get my head around it.  Any help would be greatly appreciated.
*****HTML with drop downs*****
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Chained Selects</title>
<script language="javascript" src="chainedselects.js"></script>
<script language="javascript" src="config.php"></script>
<?php include("config.php"); ?>
<body onload="initListGroup('vehicles', document.forms[0].make, document.forms[0].type, document.forms[0].model, '')">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="90%"><tr><td>
<table align="center">
<td>Select a Make:&nbsp;</td>
<td><select name="make" style="width:180px;"></select></td>
<td>Select a Type:&nbsp;</td>
<td><select name="type" style="width:180px;"></select></td>
<td>Select a Model:&nbsp;</td>
<td><select name="model" style="width:180px;"></select></td>
<td><input type="button" value="Reset" onclick="resetListGroup('vehicles')">
$dbc=mysql_connect ("localhost", "rwscncom_imptinv","greenimpt") or die('Cannot connect to the database because: ' . mysql_error());
mysql_select_db ("rwscncom_imptinv");
$result = mysql_query("SELECT DISTINCT Make FROM invdat WHERE Make = 'Abarth' OR Make = 'Acura' OR Make = 'Alfa Romeo' OR Make = 'AMG' OR Make = 'Audi' OR Make = 'Bentley' OR Make = 'BMW' OR Make = 'Bugatti' OR Make = 'Citroën' OR Make = 'Dacia' OR Make = 'Daewoo' OR Make = 'Daihatsu' OR Make = 'Ferrari' OR Make = 'Fiat' OR Make = 'Hino' OR Make = 'Hispano' OR Make = 'Holden' OR Make = 'Honda' OR Make = 'Hyundai' OR Make = 'Infiniti' OR Make = 'Isuzu' OR Make = 'Iveco' OR Make = 'Jaguar' OR Make = 'Kia' OR Make = 'koda' OR Make = 'Lada' OR Make = 'Lamborghini' OR Make = 'Lancia' OR Make = 'Land Rover' OR Make = 'Lexus' OR Make = 'Maruti' OR Make = 'Maserati' OR Make = 'Maybach' OR Make = 'Mazda' OR Make = 'Mercedes-Benz' OR Make = 'MINI' OR Make = 'Mitsubishi' OR Make = 'Nissan' OR Make = 'Opel' OR Make = 'Orion' OR Make = 'Peugeot' OR Make = 'Porsche' OR Make = 'Renault' OR Make = 'Rolls-Royce' OR Make = 'Saab' OR Make = 'Scania' OR Make = 'Scion' OR Make = 'SEAT' OR Make = 'Setra' OR Make = 'Smart' OR Make = 'Sterling' OR Make = 'Subaru' OR Make = 'Suzuki' OR Make = 'Tata' OR Make = 'Thomas' OR Make = 'TOYOTA' OR Make = 'Troller' OR Make = 'VAZ' OR Make = 'Volkswagen' OR Make = 'Volvo' ORDER BY Make");
<script type="text/javascript">
var hide_empty_list=true;
var hide_empty_list=true;
addListGroup("vehicles", "car-makers");
addList("car-makers", "Select a maker", "", "dummy-maker", 1);
while($row = mysql_fetch_array($result))
echo "addList(\"car-makers\", \"". $row['Make'] ."\", \"" . $row['Make'] . "\", \"" . $row['Make'] . "\");\n";
addList("dummy-maker", "Not available", "", "dummy-car");
addOption("dummy-car", "Not available", "");
addList("TOYOTA", "Select vehicle type", "", "dummy-toyota", 1);
addList("TOYOTA", "Cars", "car", "TOYOTA-Cars");
addList("TOYOTA", "SUVs/Van", "suv", "TOYOTA-SUVs/Van");
addList("TOYOTA", "Trucks", "truck", "TOYOTA-Trucks");
addOption("dummy-toyota", "Not available", "");
addOption("TOYOTA-Cars", "Select a model", "");
addOption("TOYOTA-Cars", "Avalon", "Avalon");
addOption("TOYOTA-Cars", "Camry", "Camry");
addOption("TOYOTA-Cars", "Celica", "Celica");
addOption("TOYOTA-Cars", "Corolla", "Corolla");
addOption("TOYOTA-Cars", "ECHO", "ECHO");
addOption("TOYOTA-Cars", "Matrix", "Matrix");
addOption("TOYOTA-Cars", "MR2 Spyder", "MR2 Spyder");
addOption("TOYOTA-Cars", "Prius", "Prius");
addOption("TOYOTA-SUVs/Van", "Select a model", "", 1);
addOption("TOYOTA-SUVs/Van", "4Runner", "4Runner");
addOption("TOYOTA-SUVs/Van", "Highlander", "Highlander");
addOption("TOYOTA-SUVs/Van", "Land Cruiser", "Land Cruiser");
addOption("TOYOTA-SUVs/Van", "RAV4", "RAV4");
addOption("TOYOTA-SUVs/Van", "Sequoia", "Sequoia");
addOption("TOYOTA-SUVs/Van", "Sienna", "Sienna");
addOption("TOYOTA-Trucks", "Select a model", "");
addOption("TOYOTA-Trucks", "Tacoma", "Tacoma");
addOption("TOYOTA-Trucks", "Tundra", "Tundra", 1);
addList("Honda", "Select vehicle type", "", "dummy-honda", 1);
addList("Honda", "Cars", "car", "Honda-Cars");
addList("Honda", "SUVs/Van", "suv", "Honda-SUVs/Van");
addOption("dummy-honda", "Not available", "");
addOption("Honda-Cars", "Select a model", "");
addOption("Honda-Cars", "Accord Sedan", "Accord Sedan");
addOption("Honda-Cars", "Accord Coupe", "Accord Coupe");
addOption("Honda-Cars", "Civic Sedan", "Civic Sedan");
addOption("Honda-Cars", "Civic Coupe", "Civic Coupe");
addOption("Honda-Cars", "Civic Hybrid", "Civic Hybrid");
addOption("Honda-Cars", "Civic Si", "Civic Si");
addOption("Honda-Cars", "Civic GX", "Civic GX");
addOption("Honda-Cars", "Insight", "Insight");
addOption("Honda-Cars", "S2000", "S2000");
addOption("Honda-SUVs/Van", "Select a model", "", 1);
addOption("Honda-SUVs/Van", "CR-V", "CR-V");
addOption("Honda-SUVs/Van", "Pilot", "Pilot");
addOption("Honda-SUVs/Van", "Odyssey", "Odyssey");
addList("Chrysler", "Select vehicle type", "", "dummy-chrysler", 1);
addList("Chrysler", "Cars", "car", "Chrysler-Cars");
addList("Chrysler", "SUVs/Van", "suv", "Chrysler-SUVs/Van");
addOption("dummy-chrysler", "Not available", "");
addOption("Chrysler-Cars", "Select a model", "", 1);
addOption("Chrysler-Cars", "300M", "300M");
addOption("Chrysler-Cars", "PT Cruiser", "PT Cruiser");
addOption("Chrysler-Cars", "Concorde", "Concorde");
addOption("Chrysler-Cars", "Sebring Coupe", "Sebring Coupe");
addOption("Chrysler-Cars", "Sebring Sedan", "Sebring Sedan");
addOption("Chrysler-Cars", "Sebring Convertible", "Sebring Convertible");
addOption("Chrysler-SUVs/Van", "Select a model", "");
addOption("Chrysler-SUVs/Van", "Town & Country", "Town & Country");
addOption("Chrysler-SUVs/Van", "Voyager", "Voyager");
addList("Dodge", "Select vehicle type", "", "dummy-dodge");
addList("Dodge", "Cars", "car", "Dodge-Cars");
addList("Dodge", "SUVs/Van", "suv", "Dodge-SUVs/Van");
addList("Dodge", "Trucks", "truck", "Dodge-Trucks");
addOption("dummy-dodge", "Not available", "");
addOption("Dodge-Cars", "Select a model", "");
addOption("Dodge-Cars", "Intrepid", "Intrepid");
addOption("Dodge-Cars", "Neon", "Neon");
addOption("Dodge-Cars", "SRT-4", "SRT-4");
addOption("Dodge-Cars", "Stratus Coupe", "Stratus Coupe");
addOption("Dodge-Cars", "Stratus Sedan", "Stratus Sedan");
addOption("Dodge-Cars", "Viper", "Viper");
addOption("Dodge-SUVs/Van", "Select a model", "");
addOption("Dodge-SUVs/Van", "Caravan", "Caravan");
addOption("Dodge-SUVs/Van", "Durango", "Durango");
addOption("Dodge-SUVs/Van", "Ram Van", "Ram Van");
addOption("Dodge-Trucks", "Select a model", "");
addOption("Dodge-Trucks", "Dakota", "Dakota");
addOption("Dodge-Trucks", "Ram Pickup", "Ram Pickup");
addList("Ford", "Select vehicle type", "", "dummy-ford");
addList("Ford", "Cars", "car", "Ford-Cars");
addList("Ford", "SUVs/Van", "suv", "Ford-SUVs/Van");
addList("Ford", "Trucks", "truck", "Ford-Trucks");
addOption("dummy-ford", "Not available", "");
addOption("Ford-Cars", "Select a model", "");
addOption("Ford-Cars", "ZX2", "ZX2");
addOption("Ford-Cars", "Focus", "Focus");
addOption("Ford-Cars", "Taurus", "Taurus");
addOption("Ford-Cars", "Crown Victoria", "Crown Victoria");
addOption("Ford-Cars", "Mustang", "Mustang");
addOption("Ford-Cars", "Thunderbird", "Thunderbird");
addOption("Ford-SUVs/Van", "Select a model", "");
addOption("Ford-SUVs/Van", "Escape", "Escape");
addOption("Ford-SUVs/Van", "Explorer", "Explorer");
addOption("Ford-SUVs/Van", "Expedition", "Expedition");
addOption("Ford-SUVs/Van", "Excursion", "Excursion");
addOption("Ford-SUVs/Van", "Windstar", "Windstar");
addOption("Ford-SUVs/Van", "Econoline", "Econoline");
addOption("Ford-Trucks", "Select a model", "");
addOption("Ford-Trucks", "Ranger", "Ranger");
addOption("Ford-Trucks", "F-150", "F-150");
addOption("Ford-Trucks", "F-250", "F-250");
addOption("Ford-Trucks", "F-350", "F-350");
// Chained Selects
// Copyright Xin Yang 2004
// Web Site: www.yxScripts.com
// EMail: m_yangxin@hotmail.com
// Last Updated: 2004-08-23
// This script is free as long as the copyright notice remains intact.
var _disable_empty_list=false;
var _hide_empty_list=false;
// ------
if (typeof(disable_empty_list)=="undefined") { disable_empty_list=_disable_empty_list; }
if (typeof(hide_empty_list)=="undefined") { hide_empty_list=_hide_empty_list; }
var cs_goodContent=true, cs_M="M", cs_L="L", cs_curTop=null, cs_curSub=null;
function cs_findOBJ(obj,n) {
  for (var i=0; i<obj.length; i++) {
    if (obj[i].name==n) { return obj[i]; }
  return null;
function cs_findContent(n) { return cs_findOBJ(cs_content,n); }
function cs_findM(m,n) {
  if (m.name==n) { return m; }
  var sm=null;
  for (var i=0; i<m.items.length; i++) {
    if (m.items[i].type==cs_M) {
      if (sm!=null) { break; }
  return sm;
function cs_findMenu(n) { return (cs_curSub!=null && cs_curSub.name==n)?cs_curSub:cs_findM(cs_curTop,n); }
function cs_contentOBJ(n,obj){ this.name=n; this.menu=obj; this.lists=new Array(); this.cookie=""; }; cs_content=new Array();
function cs_topmenuOBJ(tm) { this.name=tm; this.items=new Array(); this.df=0; this.addM=cs_addM; this.addL=cs_addL; }
function cs_submenuOBJ(dis,link,sub) {
  this.type=cs_M; this.dis=dis; this.link=link; this.df=0;
  var x=cs_findMenu(sub);
  this.items=x==null?new Array():x.items;
  this.addM=cs_addM; this.addL=cs_addL;
function cs_linkOBJ(dis,link) { this.type=cs_L; this.dis=dis; this.link=link; }
function cs_addM(dis,link,sub) { this.items[this.items.length]=new cs_submenuOBJ(dis,link,sub); }
function cs_addL(dis,link) { this.items[this.items.length]=new cs_linkOBJ(dis,link); }
function cs_showMsg(msg) { window.status=msg; }
function cs_badContent(n) { cs_goodContent=false; cs_showMsg("["+n+"] Not Found."); }
function cs_optionOBJ(text,value) { this.text=text; this.value=value; }
function cs_emptyList(list) { for (var i=list.options.length-1; i>=0; i--) { list.options[i]=null; } }
function cs_refreshList(list,opt,df) {
  for (var i=0; i<opt.length; i++) {
    list.options[i]=new Option(opt[i].text, opt[i].value);
  if (opt.length>0) {
function cs_getOptions(menu) {
  var opt=new Array();
  for (var i=0; i<menu.items.length; i++) {
    opt[i]=new cs_optionOBJ(menu.items[i].dis, menu.items[i].link);
  return opt;
function cs_updateListGroup(content,idx,sidx,mode) {
  var i=0, curItem=null, menu=content.menu;
  while (i<idx) {
  if (menu.items[sidx].type==cs_M && idx<content.lists.length-1) {
    var df=cs_getIdx(mode,content.cookie,idx+1,menu.items[sidx].df);
    cs_refreshList(content.lists[idx+1], cs_getOptions(menu.items[sidx]), df);
    if (content.cookie) {
    if (idx+1<content.lists.length) {
      if (disable_empty_list) {
      if (hide_empty_list) {
  else {
    for (var s=idx+1; s<content.lists.length; s++) {
      if (disable_empty_list) {
      if (hide_empty_list) {
      if (content.cookie) {
function cs_initListGroup(content,mode) {
  var df=cs_getIdx(mode,content.cookie,0,content.menu.df);
  cs_refreshList(content.lists[0], cs_getOptions(content.menu), df);
  if (content.cookie) {
function cs_updateList() {
  var content=this.content;
  for (var i=0; i<content.lists.length; i++) {
    if (content.lists[i]==this) {
      if (content.cookie) {
      if (i<content.lists.length-1) {
function cs_getIdx(mode,name,idx,df) {
  if (mode) {
    var cs_idx=cs_getCookie(name+"_"+idx);
    if (cs_idx!="") {
  return df;
function _setCookie(name, value) {
function cs_setCookie(name, value) {
function cs_getCookie(name) {
  var cookieRE=new RegExp(name+"=([^;]+)");
  if (document.cookie.search(cookieRE)!=-1) {
    return RegExp.$1;
  else {
    return "";
// ----
function addListGroup(n,tm) {
  if (cs_goodContent) {
    cs_curTop=new cs_topmenuOBJ(tm); cs_curSub=null;
    var c=cs_findContent(n);
    if (c==null) {
      cs_content[cs_content.length]=new cs_contentOBJ(n,cs_curTop);
    else {
      delete(c.menu); c.menu=cs_curTop;
function addList(n,dis,link,sub,df) {
  if (cs_goodContent) {
    if (cs_curSub!=null) {
      if (typeof(df)!="undefined") { cs_curSub.df=cs_curSub.items.length-1; }
    else {
function addOption(n,dis,link,df) {
  if (cs_goodContent) {
    if (cs_curSub!=null) {
      if (typeof(df)!="undefined") { cs_curSub.df=cs_curSub.items.length-1; }
    else {
function initListGroup(n) {
  var _content=cs_findContent(n), count=0;
  if (_content!=null) {
    content=new cs_contentOBJ("cs_"+n,_content.menu);
    for (var i=1; i<initListGroup.arguments.length; i++) {
      if (typeof(arguments[i])=="object" && arguments[i].tagName && arguments[i].tagName=="SELECT") {
        arguments[i].content=content; arguments[i].idx=count++;
      else if (typeof(arguments[i])=="string" && /^[a-zA-Z_]\w*$/.test(arguments[i])) {
    if (content.lists.length>0) {
function resetListGroup(n) {
  var content=cs_findContent("cs_"+n);
  if (content!=null && content.lists.length>0) {
// ------

Open in new window

Question by:PageMasterRWS
  • 4
  • 3

Expert Comment

ID: 24748322
Hi, I found that construct the dropdown as you show in your code is very hard (well, very cumbersome), I encourage you to try som more simple, see this example:


I think this is the "hello world" of the populating dropdown with ajax.

Have a nice day!

Author Comment

ID: 24755783
Thanks for the reference.  I've been playing around with this and I can't seem to get any further with this script either.  I'm not much of a programmer unfortunately.  I zipped up my code can you take a look?  Seems I get to first base but after that I'm not sure how this really works to get any farther along.
PS: I was required to zip up the files in .txt format in order to send them.


Expert Comment

ID: 24777095
Hi, sorry by my absence but I was outside the town, I am reviewing your archives, as soon as it has something I post it.
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.


Expert Comment

ID: 24777472
Hi, I modified the codetips' code and simplified it, now you has only two files, the drop file that render the initial state (two droplist, the first one with the first make selected and the dependat droplist with the first model selected because this model belongs to the first make, Ok?).

Well, when you made some change in the first drop, the function CategoryGrab is called and rendered in memory (the selected make is passed as parameter), when result (the new droplist with the models) is obtained, it is loaded into the DIV container and overwrite the old droplist (the one with the model of the previous make). This happens at a instant and the page not even blinks.

Hope this helps!!

Author Comment

ID: 24787722
Thank you so much for your help on this.  I do have a restriction that hinders my use of this.  I have a feed file in .txt format that is sent via ftp to my server.  A cron wipes the database then imports the data into my database in one table.  The table is structured like so...
Dealer ID  int(10) No      
Stock Number  varchar(30) No      
Year  int(4) No      
Make  varchar(20) No      
Model  varchar(30) No      
Trim  varchar(30) No      
VIN  varchar(18) No      
Mileage  mediumint(8) No      
Price  int(8) No      
MSRP  int(8) No      
Exterior Color  varchar(30) No      
Interior Color  varchar(30) No      
Transmission  varchar(50) No      
Image  text No      
Description  text No      
Notes  text No      
Body Type  varchar(50) No      
Engine Type  varchar(50) No      
Drive Type  varchar(50) No      
Fuel Type  varchar(50) No      
Type  varchar(10) No      
internet price  int(8) No    
Once the data is imported the file is deleted.   The only single identifier that is unique is the stock number of each vehicle.  I can't create other fields or tables and keep this automated unless I find some way to divide up the .txt file and import them separately into multiple tables or databases.  Not sure how to do that.  It took a lot just to create what I have.  Anyway...I tested your solution and it works great however when I tried to use my existing database it bombed out due to the lack of identifiers your solution requires.
Based on your code is there something I can do to make this work for me?
Thanks so much for all your help!!

Assisted Solution

angelsergio_e earned 2000 total points
ID: 24789828
Hi, well as I can see, you only need to change the SELECT clause (and a few minor details) to achieve that you need, I'm sending you the files with the pertinent changes.

Best Regards,


Accepted Solution

PageMasterRWS earned 0 total points
ID: 24842275
I'm terribly sorry that I haven't gotten back to this until now.  I had some family issues that kept me from my work for a few days.  I will review and comment back.  Thanks so much for all your help.

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When table data gets too large to manage or queries take too long to execute the solution is often to buy bigger hardware or assign more CPUs and memory resources to the machine to solve the problem. However, the best, cheapest and most effective so…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

971 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question