Jump to content

Combo Drop Menu?


adilmarwat
 Share

Recommended Posts

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

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>

Edited by Deirdre's Dad
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...