1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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