AJAX PHP drop down boxes

Posted on 2009-06-30
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" "">
<html xmlns="">
<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:
// EMail:
// 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 ( { 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 &&,n); }
function cs_contentOBJ(n,obj){;; this.lists=new Array(); this.cookie=""; }; cs_content=new Array();
function cs_topmenuOBJ(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.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;; }
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,;
  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,;
  cs_refreshList(content.lists[0], cs_getOptions(, 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 (!=-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 {
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,;
    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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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.
Webinar: MongoDB® Index Types

Join Percona’s Senior Technical Services Engineer, Adamo Tonete as he presents “MongoDB Index Types, How, When and Where Should They be Used?” on Wednesday, July 12, 2017 at 11:00 am PDT / 2:00 pm EDT (UTC-7).


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 500 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
In this blog post, we’ll look at how ClickHouse performs in a general analytical workload using the star schema benchmark test.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

691 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