AJAX: Update one drop-down based on selection of another

[chrscote]

I have a set of 2 drop-downs in which the 2nd is a subset dependent on the first. Instead of listing all possible options in the second drop-down, I'd like to have it update as the user selects different items in the first drop-down. Can someone please help me figure out how to do this? I have very limited experience with AJAX and have only done the basics with it.

Chris

[mataichi]

This might get you going in the right direction....

PerformCS would be set to fire on the onchange event for the first select box and would pass the value of the selected option (this.value). It makes a call to the server (in this case using an asp page). After the server page is done, it returns to the FillBox2 javascript function.

function PerformCS(theValue)  {
	xmlHttp=GetXmlHttpObject();
	if (xmlHttp==null) {
		alert ("Browser does not support HTTP Request");
		return;
	}
	var url="CSProcess.asp";
	url=url+"?theValue="+theValue;
	url=url+"&sid="+Math.random();	//prevents a cached version from being used
	xmlHttp.onreadystatechange=FillBox2;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
}

CSProcess.asp
--Here you would take the value passed by "theValue" and get the options needed based on this. You can then create the html for the select input.

function FillBox2() { 
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
		var theResponse = xmlHttp.responseText;

                //theResponse has whatever you returned from CSProcess.asp (ie the code for the select input). You can then insert this text into the document where you want it using innerHTML

        }
}

This is cross browser code to set the object....

function GetXmlHttpObject() { 
	var objXMLHttp=null;
	if (window.XMLHttpRequest) {
		objXMLHttp=new XMLHttpRequest();
	}
	else if (window.ActiveXObject) {
		objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	return objXMLHttp;
}