AJAX PHP drop down boxes

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

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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!
PageMasterRWSAuthor Commented:
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.

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.
Acronis True Image 2019 just released!

Create a reliable backup. Make sure you always have dependable copies of your data so you can restore your entire system or individual files.

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!!
PageMasterRWSAuthor Commented:
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!!
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,

PageMasterRWSAuthor Commented:
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.