If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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

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.

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.

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.

Code:

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