Ajax Tutorial Top List - Chained select boxes

Abstract: This tutorial demonstrates how to wire together several selected boxed when the value on the next box depends of the selected value from the previous box. PHP is used.

PHP

This script requires PHP. You can also other server side languages if you rewrite the code for getCities.php(See below)

Put this into your <HEAD> section

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2006
Owner of DHTMLgoodies.com

************************************************************************************************************/	
var ajax = new sack();

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){
		ajax.requestFile = 'getCities.php?countryCode='+countryCode;	// Specifying which file to get
		ajax.onCompletion = createCities;	// Specify function that will be executed after file has been found
		ajax.runAJAX();		// Execute AJAX function
	}
}

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

</script>

>	All Tutorials
	Ajax and .NET
	Ajax and ColdFusion
	Ajax and Java
	Ajax and PHP
	Ajax and SOA
	Ajax Goodies
	Ajax Tool
	Facebook MockAjax
	Google Web Toolkit
	JavaScript Framework
	Ruby on Rails
	Technique Introduction
	Without XMLHttpRequest
	Yahoo! UI

Chained select boxes

PHP

Put this into your <HEAD> section

Put this into your <BODY> section

Reviews:

Statistic Information About this Resource: