Javascript Drop down Menu

Discussion in 'JavaScript' started by grayner, Oct 25, 2007.

0
  1. #1
    I'm a real novice. I'm trying to make a simple Dynamic drop-down menu of cities and countries. This is how it is supposed to function :

    Select :
    USA
    Brazil
    Argentina
    etc.

    when selected, new dropdown appears:
    USA ==> cities:
    Atlanta
    Boston
    etc.

    when selected:
    Atlanta ==> shows a table with pdf files of atlanta maps

    can anyone help?

    thanks.
     
    grayner, Oct 25, 2007 IP
  2. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2 
    <!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 cities =[]; 
	cities["CA"] = ["Sacramento","San Diego","San Francisco","Los Angeles"];
	cities["OH"] = ["Cleveland","Akron","Canton","Cincinnati","Columbus"];
	cities["PA"] = ["Philadelphia","Pittsburgh","Harrisburgh"];
	
	function fillSelect(nValue,nList){

		nList.options.length = 1;
		var curr = cities[nValue];
		for (each in curr)
			{
			 var nOption = document.createElement('option'); 
			 nOption.appendChild(document.createTextNode(curr[each])); 
			 nOption.setAttribute("value",curr[each]); 			 
			 nList.appendChild(nOption); 
			}
	}

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

	 body {background-color:#eae3c6;margin-top:60px}
	 form {width:330px;margin:auto}
	 fieldset {width:330px;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:tahoma;font-size:10pt;width:125px;margin-left:27px}
	.submitBtn {display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
	<form method="post" action="">
	   <fieldset>
		<legend>Form</legend>
			<select name='states' onchange="fillSelect(this.value,this.form['cities'])">
				<option value="">Select Your State</option>
				<option value="CA">California</option>
				<option value="OH">Ohio</option>
				<option value="PA">Pennsylvania</option>
			</select>
			<select name='cities'>
				<option value="">Select Your City</option>
			</select>
		<input type='submit' name='submit' value="Submit" class='submitBtn'>
	   </fieldset>
	</form>
</body>
</html>
    Code (markup):
     
    Mike H., Oct 25, 2007 IP
  3. temp2

    temp2 Well-Known Member

    Messages:
    1,231
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    150
    Digital Goods:
    2
    #3
    temp2, Oct 28, 2007 IP