jim.davidson Posted June 6, 2007 Share Posted June 6, 2007 I'm running php, dreamweaver 8, and mySQL ver 4.1.21 My form has two menus, one for countries and one for states. What I want to do is populate the states menu based on which country is selected from the countries menu. So that is I select U.S. from countries menu the states menu would only list U.S. states, or if I chose Canada my states menu would have only canadian provinces..etc. Is this doable? If so can someonr point me in the right direction? Thanks Quote Link to comment Share on other sites More sharing options...
Psycho Posted June 6, 2007 Share Posted June 6, 2007 There are several different options. The best option for your situation will depend on the number of Countries and States your list will contain. If you will have a relatively small number of countries/states then I would suggest using javascript only for that functionality. If not, you can either have the page submit on change of the country field and then refresh the page displaying the updated state field. Or you can use AJAX (combination of Javascript and PHP [or other server-side technology] to retrieve the updated list in the background and update it dynamically. However, there can be a very slight lag that can cause some weird issues. So, it would be smart to disable the state field whent he update is in process and then re-enable it once the update is done. It should only be a fraction of a second, but I have been able to "break" sites that used AJAX to update a select list and did not take precautions. So, my question to you would be how many countries do you have and what is the average number of states each has? Quote Link to comment Share on other sites More sharing options...
jim.davidson Posted June 6, 2007 Author Share Posted June 6, 2007 Well the countries menu has every country on the globe (239) So far for states only three countries States US - 61 (states and territories) Mexico - 32 (states) Canada - 14 (provinces) Quote Link to comment Share on other sites More sharing options...
Psycho Posted June 6, 2007 Share Posted June 6, 2007 Well, what do you mean by "So far" are you planning to add states for every country in the near term? If not, then just go with javascript. Just write out the list of states for each country into a javascript array. Here's an example: <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'); function setStates(){ cntrySel = document.getElementById('country'); cntryVal = cntrySel[cntrySel.selectedIndex].value; stateList = (states[cntryVal]) ? states[cntryVal] : false; changeSelect('state', stateList); } function changeSelect(fieldID, newList) { selectField = document.getElementById(fieldID); selectField.options.length = 0; if (newList!=false) { for (i=0; i<newList.length; i++) { selectField.options[selectField.length] = new Option(newList[i], newList[i]); } selectField.disabled = false; } else { selectField.options[selectField.length] = new Option('Not Applicable', ''); selectField.disabled = true; } } </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> <option value="CountryA">CountryA</option> <option value="CountryB">CountryB</option> </select> <br> State: <select name="state" id="state"> <option value="">Not Applicable</option> </select> <br> </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.