graham23s Posted July 20, 2007 Share Posted July 20, 2007 Hi Guys, what i'm trying to do is when a user selects a country say UK, all the uk states are displayed in another selection box below BUT if the US is selected all the us states are shown, this is on nion every friends/dating site just curious as to how this is done thanks for any tips Graham Quote Link to comment Share on other sites More sharing options...
GingerRobot Posted July 20, 2007 Share Posted July 20, 2007 Well, given that the data for the second drop down box is unlikely to change in your example, it would most often be done purely through javascript. The onchange() action would be used for the first drop down, which would call a javascript function to populate the second based on the value of the first. If the data in the second is more dynamic, then a database query would be needed. The principal is the same, except the javascript would call a php file to query the database and return the content for the second, and then the javascript would use the returned data to populate the second (e.g. you would use AJAX) Quote Link to comment Share on other sites More sharing options...
jorgep Posted July 20, 2007 Share Posted July 20, 2007 I would use ajax and json (javascript object notation) to parse the information. Use the action onchange of the country drop down box to triger the ajax function and load the states ddbox. Let me know if you need more details.. Quote Link to comment Share on other sites More sharing options...
graham23s Posted July 20, 2007 Author Share Posted July 20, 2007 Thanks guys, damn so i would need javascript , not so bad i guess used it a few times for minor thing , i haven't even touched upon ajax yet. i suppose i could use a massive selection box then <optgroup> the different states etc but then that won't look to good lol is there any tutorials on this anywhere guys i can look at ? thanks for the help guys Graham Quote Link to comment Share on other sites More sharing options...
Psycho Posted July 20, 2007 Share Posted July 20, 2007 This utilizes Countries, States, and Cities. It should get you on the right track. <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...
graham23s Posted July 21, 2007 Author Share Posted July 21, 2007 oh yeah that works perfectly, i don't suppose there is anywhere online with all the states/countries pre-typed or would i need to do it all myself lol thanks guys Graham Quote Link to comment Share on other sites More sharing options...
Psycho Posted July 21, 2007 Share Posted July 21, 2007 oh yeah that works perfectly, i don't suppose there is anywhere online with all the states/countries pre-typed or would i need to do it all myself lol I'm sure there are plenty of places for you to get all the Country/State combinations. But, probably not all in one file. Probably would need to do each country individually. Anyway, if you are going to do ALL countries and states, you should probably be pulling from a database as trying to put all that data in a page could cause issues. So, you would need to either refresh the page each time the user selected a country or use AJAX. Quote Link to comment Share on other sites More sharing options...
graham23s Posted July 21, 2007 Author Share Posted July 21, 2007 no problem thanks for the help mate. Graham 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.