OriginalBoy Posted June 14, 2008 Share Posted June 14, 2008 Hey, I am hoping to work out how to make or just find a dynamic option list for country's. So basically you have all seen this before they select country the list for state/county changes. How is this done? I am a total noob at javascript and I mainly do PHP so don't get all technical on me Regards, Steve Quote Link to comment Share on other sites More sharing options...
hansford Posted June 14, 2008 Share Posted June 14, 2008 here's an example that would provide you enough info. to get it figured out. <form name='form1' method='post' action='mextpage.html'> <select name='country' onchange='check_country(this.form);'> <option value='usa'>usa</option> <option value='mexico'>mexico</option> <option value='italy'>italy</option> </select><br> <select name='language'> <option value='english' selected>english</option> <option value='spanish'>spanish</option> <option value='italian'>italian</option> </select> </form> <script language="JavaScript" type="text/javascript"> <!-- function check_country(frm){ var selected = frm.country.options[frm.country.selectedIndex].value; switch(selected){ case'usa': frm.language.options[0].selected = true; break; case'mexico': frm.language.options[1].selected = true; break; case'italy': frm.language.options[2].selected = true; } } //--> </script> Quote Link to comment Share on other sites More sharing options...
Psycho Posted June 14, 2008 Share Posted June 14, 2008 <html> <head> <script type="text/javascript"> // State lists var states = new Array(); states['Canada'] = new Array('Alberta','British Columbia','Ontario'); states['Mexico'] = new Array('Baja California','Chihuahua','Jalisco'); states['United States'] = new Array('California','Florida','New York'); // City lists var cities = new Array(); cities['Canada'] = new Array(); cities['Canada']['Alberta'] = new Array('Edmonton','Calgary'); cities['Canada']['British Columbia'] = new Array('Victoria','Vancouver'); cities['Canada']['Ontario'] = new Array('Toronto','Hamilton'); cities['Mexico'] = new Array(); cities['Mexico']['Baja California'] = new Array('Tijauna','Mexicali'); cities['Mexico']['Chihuahua'] = new Array('Ciudad Juárez','Chihuahua'); cities['Mexico']['Jalisco'] = new Array('Guadalajara','Chapala'); cities['United States'] = new Array(); cities['United States']['California'] = new Array('Los Angeles','San Francisco'); cities['United States']['Florida'] = new Array('Miami','Orlando'); cities['United States']['New York'] = new Array('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" onchange="alert(this.options[this.selectedIndex].value)"> <option value="">Please select a Country</option> </select> </form> </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.