Hi all,
I am trying to create a drop down form on a webpage where the items that appear in the second drop down box are dependant on what is chosen in the first.
For example, choose country, then state etc.
Can anyone provide some really easy to understand help for me as I am a bif of a novice with JS.
Thanks!!
Jay
Jump to PostPerhaps this will give you a place to start. Notice the "States" array beginning about line 20; each major group (country, in this case) has an equals (=) sign followed by the code for that group. Within each group are multiple lines each having a code (state, whatever) followed by …
Perhaps this will give you a place to start. Notice the "States" array beginning about line 20; each major group (country, in this case) has an equals (=) sign followed by the code for that group. Within each group are multiple lines each having a code (state, whatever) followed by a semicolon and then the name. The final "=end" is required.
When you select a country, the first function clears any existing State values, then loops through the array to find all States belonging to that country to repopulate the State select list.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US">
<head>
<title>Dropdows</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="en-US" />
<meta name="Author" content="James Alarie - jalarie@umich.edu" />
<link rel="icon" href="favicon.ico" />
<link rev="made" href="mailto:jalarie@umich.edu" />
<script type="text/javascript">
<!-- Hide this code from non-JavaScript browsers
States=new Array(
'=USA',
"AA;Armed Forces - Americas", // military
"AE;Armed Forces - Europe", // military
"AP;Armed Forces - Pacific", // military
"AL;Alabama",
"AK;Alaska",
"AS;American Samoa", // territory
"AZ;Arizona",
"AR;Arkansas",
"CA;California",
"CO;Colorado",
"CT;Connecticut",
"DE;Delaware",
"DC;District of Columbia", // our nation's capital
"FM;Federated States of Micronesia", // territory
"FL;Florida",
'=USSR',
"UK;Ukraine",
"RS;Russia",
'=end'
);
function DoStates() {
f1=document.forms[0]; // abbreviation
CIndex=f1.Country.selectedIndex;
CValue=f1.Country.options[CIndex].value;
for (SIndex=f1.State.length; SIndex>=0; SIndex=SIndex-1) {
f1.State.options[SIndex]=null;
}
CopySwitch='no';
for (AIndex=0; AIndex<States.length; AIndex++) {
State=States[AIndex];
if (State.substring(0,1) == '=') {
if (State.substring(1) == CValue) {
CopySwitch='yes';
} else {
CopySwitch='no';
}
} else {
SValues=State.split(/;/);
if (CopySwitch == 'yes') {
SIndex=f1.State.length;
f1.State.options[SIndex]=new Option();
f1.State.options[SIndex].value=SValues[0];
f1.State.options[SIndex].text=SValues[1];
}
}
}
} // DoStates
function PickedState() {
f1=document.forms[0]; // abbreviation
SIndex=f1.State.selectedIndex;
SValue=f1.State.options[SIndex].value;
SText=f1.State.options[SIndex].text;
alert(SValue+': '+SText);
} // PickedState
// End hiding -->
</script>
</head>
<body background="jaa_bgnd.jpg" bgcolor="#ffffee" text="black"
link="blue" vlink="#800088" alink="red">
<!-- Page Header -->
<div class="header">
<center><h1>Dropdows</h1></center>
<hr />
</div>
<!-- Content -->
<div class="content">
<br />
<noscript>
<font color="red">
You must have javascript to make use of this page.
</font>
</noscript>
<center>
<form method="post" action="">
Country:
<select name="Country" id="Country" onchange="DoStates();">
<option value="">- pick one -</option>
<option value="USA">United States of America</option>
<option value="USSR">Union of Soviet Socialist Republics</option>
</select>
<br />
State:
<select name="State" id="State" onchange="PickedState();">
<option value=""> </option>
</select>
<br />
<input type="reset" value=" Reset " title=" Reset " />
</form>
</center>
</div>
<!-- Page Footer -->
<div class="footer">
<br clear="all" /><hr />
Written on September 12, 2006, by:
<a href="mailto:jalarie@umich.edu">James Alarie</a>
</div>
</body>
</html>Excellent! Thank you so much for your help!! It is very much appreciated.
Jay
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.