adilmarwat Posted February 4, 2010 Share Posted February 4, 2010 I want to create a two drop menu seperately1st drop menu contains countries name, while 2nd drop menu contain cities. my problem is that when I select "England" from 1st menu the 2nd drop menu directly show the cites of england. how it is possible. please help me, I am in so trouble. Adil Link to comment Share on other sites More sharing options...
jeffman Posted February 4, 2010 Share Posted February 4, 2010 You could do this by submitting a form with the country name and returning a new document with the correct cities in the select element. But users will hate how slow that works.You could do the same using AJAX, but it will also be slow.I suggest using a combination of CSS and Javascript, as the following sample demonstrates. Many authors would store all the cities in javascript arrays, and then repopulate the select element with city information every time the country select element changes. I find this inefficient, so that is not what I show.I like to create a unique select element in HTML for each group of cities. Only the first is visible. The rest are hidden. The CSS display property does that. When the country select element changes, a function is executed that toggles the display property of all the city elements. Only the correct city element is left visible.What I have shown you is the document the way it arrives at the browser. You would use PHP to generate the select elements from your database. I cannot show you how to do that, because I do not know your database. If you have no database, then you can hard-code the data as I have done.Because some browsers like to leave form elements unchanged when a page is reloaded, reloading this page could create a mismatch between the selected country and the cities that are displayed. So we call our change function as soon as the page loads. That makes sure everything always matches.You might want to create an alternate system that does use a form submission for users who have javascript disabled. Or you could ignore those users. That is your choice. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css"> #cities { padding: 0; margin: 0; border: 0; } #France { display: none; } #Germany { display: none; } </style> <script type="text/javascript"> function update_cities () { var country_select = document.getElementById("country"); var country = country_select.options[country_select.selectedIndex].value; var city_selects = document.getElementById("cities").getElementsByTagName("select"); var len = city_selects.length; for (var i = 0; i < len; ++i) {; if (city_selects[i].id == country) { city_selects[i].style.display = "block"; } else { city_selects[i].style.display = "none"; } } } function init () { var myselect = document.getElementById("country"); myselect.onchange = update_cities; update_cities (myselect); } window.onload = init; </script> </head> <body> <form> <select id="country"> <option value="England">England</option> <option value="France">France</option> <option value="Germany">Germany</option> </select> <fieldset id="cities"> <select id="England"> <option value="Birmingham">Birmingham</option> <option value="Liverpool">Liverpool</option> <option value="London">London</option> </select> <select id="France"> <option value="Lyon">Lyon</option> <option value="Marseille">Marseille</option> <option value="Paris">Paris</option> </select> <select id="Germany"> <option value="Berlin">Berlin</option> <option value="Hamburg">Hamburg</option> <option value="Munich">Munich</option> </select> </fieldset> </form> </body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.