A2xA Posted August 23, 2008 Share Posted August 23, 2008 http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx Is there anyway to make something like this without using the ajax toolkit in javascript or another language? Quote Link to comment Share on other sites More sharing options...
Psycho Posted August 24, 2008 Share Posted August 24, 2008 Yes, but you need to load all the data forr the select lists into the page. <html> <head> <script type="text/javascript"> // State lists var states = new Array(); states['Canada'] = ['Alberta','British Columbia','Ontario']; states['Mexico'] = ['Baja California','Chihuahua','Jalisco']; states['United States'] = ['California','Florida','New York']; // City lists var cities = new Array(); cities['Canada'] = new Array(); cities['Canada']['Alberta'] = ['Edmonton','Calgary']; cities['Canada']['British Columbia'] = ['Victoria','Vancouver']; cities['Canada']['Ontario'] = ['Toronto','Hamilton']; cities['Mexico'] = new Array(); cities['Mexico']['Baja California'] = ['Tijauna','Mexicali']; cities['Mexico']['Chihuahua'] = ['Ciudad Juárez','Chihuahua']; cities['Mexico']['Jalisco'] = ['Guadalajara','Chapala']; cities['United States'] = new Array(); cities['United States']['California'] = ['Los Angeles','San Francisco']; cities['United States']['Florida'] = ['Miami','Orlando']; cities['United States']['New York'] = ['Buffalo','New York']; function setStates(){ cntrySel = document.getElementById('country'); stateSel = document.getElementById('state'); stateList = states[cntrySel.value]; changeSelect(stateSel, stateList); setCities(); } function setCities(){ cntrySel = document.getElementById('country'); stateSel = document.getElementById('state'); citySel = document.getElementById('city'); cityList = cities[cntrySel.value][stateSel.value]; changeSelect(citySel, cityList); } //**************************************************************************// // FUNCTION changeSelect(fieldObj, valuesAry, [optTextAry], [selectedVal]) // //**************************************************************************// function changeSelect(fieldObj, valuesAry, optTextAry, selectedValue) { //Clear the select list fieldObj.options.length = 0; //Set the option text to the values if not passed optTextAry = (optTextAry)?optTextAry:valuesAry; //Itterate through the list and create the options for (i in valuesAry) { selectFlag = (selectedValue && selectedValue==valuesAry[i])?true:false; fieldObj.options[fieldObj.length] = new Option(optTextAry[i], valuesAry[i], false, selectFlag); } } </script> </head> <body onload="setStates();"> <form name="test" method="POST" action="processingpage.php"> Country: <select name="country" id="country" onchange="setStates();"> <option value="Canada">Canada</option> <option value="Mexico">Mexico</option> <option value="United States">United States</option> </select> <br> State: <select name="state" id="state" onchange="setCities();"> <option value="">Please select a Country</option> </select> <br> City: <select name="city" id="city"> <option value="">Please select a Country</option> </select> </form> cities['Canada'] = new Array(); cities['Canada']['Alberta'] = ['Edmonton','Calgary']; cities['Canada']['British Columbia'] = ['Victoria','Vancouver']; cities['Canada']['Ontario'] = ['Toronto','Hamilton']; </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.