Jump to content

Dynamic drop down menu

yandoo

By yandoo
in PHP Coding Help

 Share

Recommended Posts

yandoo Advanced Member

yandoo

Posted
Posted

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

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.