this should do...
the script is really simple and I coded it in record time but it can always be improved in the future if necessary.
you can copy the code below and save it as a
html file so you'll be able to see the script in action, plus it has the basic instructions of what to do....
let me know if you need help.
- Code: Select all
<SCRIPT language="JSCript">
/* BEGIN BROWSER HANDLING, DON'T TOUCH */
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;
function getObj(elementName){
if(isNS4){ return document.layers[elementName]; }
else if (isIE4 || isIE5){ return document.all(elementName); }
else if (isNS6){ return document.getElementById(elementName); }
}
function Show(id){ if(getObj(id)){ getObj(id).style.display = 'block'; } }
function Hide(id){ if(getObj(id)){ getObj(id).style.display = 'none'; } }
/* END BROWSER HANDLING */
/*
we'll need to remeber which item we display so that
we can hide it later on, when we want to display a different item
*/
var previous_state; // this var will hold the id of the current state
var previous_city; // this var will hold the id of the current city
// this function will display a list of cities according to their state
function ShowCities(state){
this_state = "selCities_" + state;
if(previous_state){ Hide(previous_state); }
if(previous_city){ Hide(previous_city); }
Show(this_state);
previous_state = this_state;
}
// this function will display the address according to the chosen city
function ShowAddress(city){
this_city = "divAddress_" + city;
if(previous_city){ Hide(previous_city); }
Show(this_city);
previous_city = this_city;
}
</SCRIPT>
<table width=100% border=1 cellspacing=5>
<tr>
<td valign=top width=33%>
<select name="state" id="state" onChange="ShowCities(this.value);">
<OPTION value="NY">New York</OPTION>
<OPTION value="LA">Los Angeles</OPTION>
</select>
<HR>
this list holds all the states.
we''l use thbe value of this list to display the cities
</td>
<td valign=top width=33%>
<select id="selCities_NY" onChange="ShowAddress(this.value);" style="display:none;">
<OPTION value="City1">City 1</OPTION>
<OPTION value="City2">City 2</OPTION>
<OPTION value="City3">City 3</OPTION>
<OPTION value="City4">City 4</OPTION>
<OPTION value="City5">City 5</OPTION>
</select>
<select id="selCities_LA" onChange="ShowAddress(this.value);" style="display:none;">
<OPTION value="City6">City 6</OPTION>
<OPTION value="City7">City 7</OPTION>
<OPTION value="City8">City 8</OPTION>
<OPTION value="City9">City 9</OPTION>
</select>
<HR>
the list of cities will show up here. you can add as many as you want, but
you MUST set the id attribute to:
<LI>"selCities_[state id]"
</td>
<td valign=top width=33%>
<div class=Address id="divAddress_City1" style="display:none;">
NY
addres for city 1
111111111
</div>
<div class=Address id="divAddress_City2" style="display:none;">
NY
addres for city 2
222222222
</div>
<div class=Address id="divAddress_City3" style="display:none;">
NY
addres for city 3
33333333
</div>
<div class=Address id="divAddress_City4" style="display:none;">
NY
addres for city 4
44444444
</div>
<div class=Address id="divAddress_City5" style="display:none;">
NY
addres for city 5
55555555
</div>
<div class=Address id="divAddress_City6" style="display:none;">
LA
addres for city 6
66666666
</div>
<div class=Address id="divAddress_City7" style="display:none;">
LA
addres for city 7
7777777
</div>
<div class=Address id="divAddress_City8" style="display:none;">
LA
addres for city 8
88888888
</div>
<div class=Address id="divAddress_City9" style="display:none;">
LA
addres for city 9
99999999
</div>
<HR>
the addresses will show up here. you can add as many as you want, but
again, you MUST set the id attribute to:
<LI>"divAddress_[state id]"
</td>
</tr>
</table>