www.webdeveloper.com
Results 1 to 2 of 2

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

  1. #1
    Join Date
    Jun 2005
    Posts
    97

    Question 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.

    Chris

  2. #2
    Join Date
    Oct 2006
    Posts
    93

    resolved

    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.

    Code:
    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.


    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
    
            }
    }
    This is cross browser code to set the object....
    Code:
    function GetXmlHttpObject() { 
    	var objXMLHttp=null;
    	if (window.XMLHttpRequest) {
    		objXMLHttp=new XMLHttpRequest();
    	}
    	else if (window.ActiveXObject) {
    		objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
    	}
    	return objXMLHttp;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles