Dynamic drop down menu

yandoo · February 5, 2008

Hi,

Im trying to add a SELECT query to display records in a db in a drop down menu.

Currently i have 2 drop down boxes that on input of the first will determine the options of the 2nd, Im using ajax to do this and it works like a charm!

But at the moment the input options for drop down boxes are static.(1st drop down = Countries, 2nd drop down = Cities) ...I ultimately want to make the input of both drop down boxes to be the result of a SELECT query to a db but one step at a time!

I have a very basic example created over 3 pages: main page(html - 2 dropdown list), php page(GET Cities php function) & ajax script(dont think needs to be edited?) ..

main page:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body{
background-repeat:no-repeat;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
height:100%;
background-color: #FFF;
margin:0px;
padding:0px;
}
select{
width:150px;
}
</style>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">

var ajax = new Array();

function getCityList(sel)
{
var countryCode = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_city').options.length = 0;	// Empty city select box
if(countryCode.length>0){
	var index = ajax.length;
	ajax[index] = new sack();

	ajax[index].requestFile = 'getCities.php?countryCode='+countryCode;	// Specifying which file to get
	ajax[index].onCompletion = function(){ createCities(index) };	// Specify function that will be executed after file has been found
	ajax[index].runAJAX();		// Execute AJAX function
}
}

function createCities(index)
{
var obj = document.getElementById('dhtmlgoodies_city');
eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}


function getSubCategoryList(sel)
{
var category = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_subcategory').options.length = 0;	// Empty city select box
if(category.length>0){
	var index = ajax.length;
	ajax[index] = new sack();

	ajax[index].requestFile = 'getSubCategories.php?category='+category;	// Specifying which file to get
	ajax[index].onCompletion = function(){ createSubCategories(index) };	// Specify function that will be executed after file has been found
	ajax[index].runAJAX();		// Execute AJAX function
}
}
function createSubCategories(index)
{
var obj = document.getElementById('dhtmlgoodies_subcategory');
eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}		
</script>
</head>

<body>

<form action="" method="post">
<table>
<tr>
	<td>Country: </td>
	<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
		<option value="">Select a country</option>
		<option value="dk">Denmark</option>
		<option value="no">Norway</option>
		<option value="us">US</option>
	</select>		</td>
</tr>
<tr>
	<td>City: </td>
	<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">

	</select>		</td>
</tr>
</table>

</form>

</body>
</html>

This is the php Get page:


<?php

if(isset($_GET['countryCode'])){

  switch($_GET['countryCode']){
   
    case "no":
      echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
      echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
      echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
      echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
     
      break;
    case "dk":
     
      echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
      echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
      echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
     
      break;
    case "us":
     
      echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
      echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
      echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
      echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
      echo "obj.options[obj.options.length] = new Option('New York','25');\n";
      echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
      echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
     
      break;
  }
}

?>

And finally the ajax script:

/* Simple AJAX Code-Kit (SACK) v1.6.1 */
/* ©2005 Gregory Wild-Smith */
/* www.twilightuniverse.com */
/* Software licenced under a modified X11 licence,
   see documentation or authors website for more details */

function sack(file) {
this.xmlhttp = null;

this.resetData = function() {
	this.method = "POST";
  		this.queryStringSeparator = "?";
	this.argumentSeparator = "&";
	this.URLString = "";
	this.encodeURIString = true;
  		this.execute = false;
  		this.element = null;
	this.elementObj = null;
	this.requestFile = file;
	this.vars = new Object();
	this.responseStatus = new Array(2);
  	};

this.resetFunctions = function() {
  		this.onLoading = function() { };
  		this.onLoaded = function() { };
  		this.onInteractive = function() { };
  		this.onCompletion = function() { };
  		this.onError = function() { };
	this.onFail = function() { };
};

this.reset = function() {
	this.resetFunctions();
	this.resetData();
};

this.createAJAX = function() {
	try {
		this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e1) {
		try {
			this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e2) {
			this.xmlhttp = null;
		}
	}

	if (! this.xmlhttp) {
		if (typeof XMLHttpRequest != "undefined") {
			this.xmlhttp = new XMLHttpRequest();
		} else {
			this.failed = true;
		}
	}
};

this.setVar = function(name, value){
	this.vars[name] = Array(value, false);
};

this.encVar = function(name, value, returnvars) {
	if (true == returnvars) {
		return Array(encodeURIComponent(name), encodeURIComponent(value));
	} else {
		this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
	}
}

this.processURLString = function(string, encode) {
	encoded = encodeURIComponent(this.argumentSeparator);
	regexp = new RegExp(this.argumentSeparator + "|" + encoded);
	varArray = string.split(regexp);
	for (i = 0; i < varArray.length; i++){
		urlVars = varArray[i].split("=");
		if (true == encode){
			this.encVar(urlVars[0], urlVars[1]);
		} else {
			this.setVar(urlVars[0], urlVars[1]);
		}
	}
}

this.createURLString = function(urlstring) {
	if (this.encodeURIString && this.URLString.length) {
		this.processURLString(this.URLString, true);
	}

	if (urlstring) {
		if (this.URLString.length) {
			this.URLString += this.argumentSeparator + urlstring;
		} else {
			this.URLString = urlstring;
		}
	}

	// prevents caching of URLString
	this.setVar("rndval", new Date().getTime());

	urlstringtemp = new Array();
	for (key in this.vars) {
		if (false == this.vars[key][1] && true == this.encodeURIString) {
			encoded = this.encVar(key, this.vars[key][0], true);
			delete this.vars[key];
			this.vars[encoded[0]] = Array(encoded[1], true);
			key = encoded[0];
		}

		urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
	}
	if (urlstring){
		this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
	} else {
		this.URLString += urlstringtemp.join(this.argumentSeparator);
	}
}

this.runResponse = function() {
	eval(this.response);
}

this.runAJAX = function(urlstring) {
	if (this.failed) {
		this.onFail();
	} else {
		this.createURLString(urlstring);
		if (this.element) {
			this.elementObj = document.getElementById(this.element);
		}
		if (this.xmlhttp) {
			var self = this;
			if (this.method == "GET") {
				totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
				this.xmlhttp.open(this.method, totalurlstring, true);
			} else {
				this.xmlhttp.open(this.method, this.requestFile, true);
				try {
					this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
				} catch (e) { }
			}

			this.xmlhttp.onreadystatechange = function() {
				switch (self.xmlhttp.readyState) {
					case 1:
						self.onLoading();
						break;
					case 2:
						self.onLoaded();
						break;
					case 3:
						self.onInteractive();
						break;
					case 4:
						self.response = self.xmlhttp.responseText;
						self.responseXML = self.xmlhttp.responseXML;
						self.responseStatus[0] = self.xmlhttp.status;
						self.responseStatus[1] = self.xmlhttp.statusText;

						if (self.execute) {
							self.runResponse();
						}

						if (self.elementObj) {
							elemNodeName = self.elementObj.nodeName;
							elemNodeName.toLowerCase();
							if (elemNodeName == "input"
							|| elemNodeName == "select"
							|| elemNodeName == "option"
							|| elemNodeName == "textarea") {
								self.elementObj.value = self.response;
							} else {
								self.elementObj.innerHTML = self.response;
							}
						}
						if (self.responseStatus[0] == "200") {
							self.onCompletion();
						} else {
							self.onError();
						}

						self.URLString = "";
						break;
				}
			};

			this.xmlhttp.send(this.URLString);
		}
	}
};

this.reset();
this.createAJAX();
}

I have the same 2 tables in a database Countries and Cities, i just need to integrate 2 SELECT queries to do this and not sure how .....

Could anybody please help??? ???

Thank You

ratcateme · February 5, 2008

hey i don't really understand much about how javascript handles XML but when i wanted to use AJAX i used XAJAX http://www.xajaxproject.org/ it looks like you could adapt your code to use XAJAX then your query's you'd be a lot easie.

Scott.

haku · February 5, 2008

I read over what you wrote a couple times, but I can't figure out what exactly it is that you want to do.

Sign In

Dynamic drop down menu

Recommended Posts

yandoo

Link to comment

Share on other sites

ratcateme

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information