Hello
I am making a webpage with two dropdown menus.
First I have a dropdown menu with a list of 235 countries. When one
country is selected from this list the contents of the next dropdown
menu is decided from a coresponding file containing a huge amount of
cities. The biggest of these files being 6 MB.
Getting different advices I have now to different sets of code doing
this thing. Does anyone know if any of these two sets of code is
suitable for what I want?
Here comes an example of the first set of code - Example 1:
First the main file:
<HTML>
<Title>Choose countries and cities from dropdown</Title>
<SCRIPT>
var va_optionslist=['Canada', 'USA', 'Norway', 'Mexico'];
function Publish_CountryList()
{
var vo_options;
for (var i=0; i<va_optionslist.length; i++)
{
vo_options = new Option(va_optionslist[i], va_optionslist[i]);
document.myForm.SEL_Countries.options[i]=vo_options;
}
document.myForm.SEL_Countries.value='USA';
}
function Update_CityList(po_CountryObj)
{
window.frames['ifm1'].location.href = po_CountryObj.value + '.htm';
}
</SCRIPT>
<BODY onload="Publish_CountryList()">
<form name="myForm">
<SELECT id="SEL_Countries" name="SEL_Countries"
onChange="Update_CityList(this)">
<OPTION value=0>Please Select A Country</Option>
</SELECT>
</form>
<iframe name=ifm1 id='ifm1' src="USA.htm">
</BODY>
</HTML>
and then coresponding data file for one country: (USA)
<HTML>
<Title>City data for USA</Title>
<SCRIPT>
var va_optionslist=['New York City', 'District Of Columbia', 'San
Fransisco', 'Los Angeles'];
function Update_CityList()
{
document.myForm.SEL_Cities.innerHTML="";
for (var i=0; i<va_optionslist.length; i++)
{
document.myForm.SEL_Cities.options[i]=new Option(va_optionslist[i],
va_optionslist[i]);
}
}
</SCRIPT>
<BODY onload="Update_CityList()">
<form name="myForm">
<SELECT id="SEL_Cities" name="SEL_Cities">
<OPTION value=0>Please Select A City</Option>
</SELECT>
</form>
</BODY>
</HTML>
Here comes an example of the second set of code - Example 2:
First the main file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Choose countries and cities from dropdown</title>
</head>
<body>
<form name="myForm" action="someServerScript.php" target="ifm">
<select onChange="window.frames['ifm1'].location.href=this.value">
<option value='0'>Please Select A Country</option>
<option value='Canada.htm'>Canada</option>
<option value='USA.htm'>United States</option>
<option value='Norway.htm'>Norway</option>
<option value='Mexico.htm'>Mexico</option>
</select>
</form>
<iframe name='ifm1' src="USA.htm">
</body>
</html>
and then the coresponding data file for one country: USA
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>City data for USA</title>
</head>
<body>
<form name="myForm"
<select id="SEL_Cities">
<option value="0">Please Select A City</option>
<option value="New York City">New York City</option>
<option value="District Of Columbia">District Of Columbia</option>
<option value="San Francisco">San Francisco</option>
<option value="Los Angeles">Los Angeles</option>
</select>
</form>
</body>
</html>
Each city in USA is identified with name, county and state. (Short form
in example) And there is about 100000 places in the list so it is
important to make the USA.htm as small as possible.
When each city is mentioned twice in the code I think maybe this will
take to much space? And resulting in longer time needed to load the
information?:
<option value="District Of Columbia">District Of Columbia</option>
Odin
