Menu box selection relevant to the another

Discussion in 'JavaScript' started by adamjblakey, Jun 5, 2007.

0
  1. #1
    Hi,

    I am trying to create a selection box on my site which changes when the selection box above has a different options.

    Basically what i am after is say for example i had selection box which has 10 countries in. When i country has been selected i need the next selection box to list all the city's within that country so that second box is always relevant to the first.

    Any idea how i would go about doing this?

    Cheers,
    Adam
     
    adamjblakey, Jun 5, 2007 IP
  2. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Adapt this to countries/cites:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
	
	var zipCodes =[]; 
	zipCodes["counties"] = ["Summit","Jefferson"];
	zipCodes["Summit"] = ["44101","44107","44116","44135","44147"];
	zipCodes["Jefferson"] = ["44221","44266","44270"];
	
	function fillSelect(isValue,isNext){

		isNext.length = 1;
		var curr = zipCodes[isValue];
		for (each in curr)
			{
			 var nOption = document.createElement('option'); 
			 var isData = document.createTextNode(curr[each]); 
			 nOption.setAttribute('value',curr[each]); 
			 nOption.appendChild(isData); 
			 isNext.appendChild(nOption); 
			}
	}

	function init(){

		fillSelect('counties',document.forms[0]['county']);
	}
	
	onload=init;

</script>
<style type="text/css">

	 body {background-color:#eae3c6;margin-top:60px}
	 form {width:350px;margin:auto}
	 fieldset {width:350px;background-color:#f0fff0;border:1px solid #87ceeb}
	 legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
	 label {font-family:times;font-size:12pt;color:#00008B;padding:5px}
	 select {font-family:times;font-size:10pt;width:145px;margin:10px}
	.submitBtn {display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
	<form method="post" action="">
	   <fieldset>
		<legend>Zip Code</legend>
			<select name='county' onchange="fillSelect(this.value,this.form['zipCode'])">
				<option selected>Select Your County</option>
			</select>
			<select name='zipCode'>
				<option selected >Select Your Zip Code</option>
			</select>
		<input type='submit' name='submit' value="Submit" class='submitBtn'>
	   </fieldset>
	</form>
</body>
</html>
    Code (markup):
     
    Mike H., Jun 5, 2007 IP
  3. adamjblakey

    adamjblakey Active Member

    Messages:
    1,121
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    80
    #3
    Thanks a lot for that its just what i am after :)
     
    adamjblakey, Jun 5, 2007 IP
  4. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You're welcome, Adam. Good luck with your project.
     
    Mike H., Jun 5, 2007 IP
  5. adamjblakey

    adamjblakey Active Member

    Messages:
    1,121
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    80
    #5
    I have included this into my site but just having a little problem as i intent use this with information from my database.

    What i have a table which has all the data in and contains a country name a resort next to it. What i need this to do when i country is selected it will search through that table and only select the citys that match.

    How would i include this into the javascript function.
     
    adamjblakey, Jun 6, 2007 IP
  6. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #6
    You need to use AJAX to do that. Whenever your task involves using a database, mention that at the start, otherwise you will waste your time and the time of anyone who responds.

    See my example code for "Dynamic Select List with PHP/MySQL " here:

    http://ajaxforums.net/index.php?topic=858.0
     
    Mike H., Jun 6, 2007 IP