By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,814 Members | 2,162 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,814 IT Pros & Developers. It's quick & easy.

Quickest way to access very long drop down lists

P: n/a
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

Sep 27 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Odin wrote:
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.
Do the search on the server, that way:

- You won't dump 6 MB onto the client when they want maybe 5 words

- You have far better searching capability (soundex, indexes, other)

- You have consistent and known performance - you have no idea what the
client machine is or isn't capable of

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>
The type attribute is required:

<script type="text/javascript">

[...] <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>
You can trim down your code by not including the closing </option> tag
(it's optional in HTML 4).

[...] 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>


You can further trim bloat by using the text only and don't include a
value attribute:

<option>District Of Columbia

then get the options text attribute rather than the value, something like:

var state = theSelect(theSelect.selectedIndex).text;

[...]

--
Rob
Sep 28 '05 #2

P: n/a
ASM
Odin a écrit :
Hello
I am making a webpage with two dropdown menus.
First I have a dropdown menu with a list of 235 countries.
Ho! no ! poor !
how to find something in this crowdly list ?
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.
Hu ? you mean : 6ko , no ?
Getting different advices I have now to different sets of code doing
this thing.
Haaa !
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'];
var va_optionslist=['Canada', 'USA', 'South-America', 'Africa', 'Asia', ...];
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)
{
var U = po_CountryObj.options[po_CountryObj.selectedIndex].value
parent.frames['ifm1'].location.href = U+'.htm';
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'];
no alphetical list ?
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">
<form name="myForm" action="" target="ifm">
<select onChange="window.frames['ifm1'].location.href=this.value">
no ! don't put an onchange
(overall if it doesn't work with any browser)
<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>
<input type=submit value="GO"
onclick="this.form.action=this.form[0].options[this.form[0].selectedIndex].value;">
</form>
<iframe name='ifm1' src="USA.htm">
</body>
</html>
this second way smells beter because you can have different
names for html files and for countries
(it's beter to have 'usa.htm' than 'united states.htm'
that's to say without a space in file name)
take care to be in habit to name your files all in lower case
to avoid mistakes with caracters forgotten in upper case
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>

You could have : data('dc_colbia-District Of Columbia','ny-New York City')

function set_select() {
for(var i=0;i<data.length;i++) {
var O = data[i].split('-');
vo_options = new Option(O[0], O[1]);
document.myForm.SEL_Countries.options[i]=vo_options;
}
}

and
<input type=submit value="GO"
onclick="this.form.action=this.form[0].options[this.form[0].selectedIndex].value+'.htm';">
--
Stephane Moriaux et son [moins] vieux Mac
Sep 28 '05 #3

P: n/a
Thank you for your answers
Following your advices I change the code to:

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>
<script type="text/javascript">
function DeleteText(tekst)
{
tekst.value='';
}
function FindCities()
{
window.frames['ifm1'].location.href=document.myForm1.SEL_Countries.valu e+'_'+document.myForm1.StartStedsNavn.value+'.htm'
}
</script>
<body>
<form name="myForm1" action="../someServerScript.php" target="ifm">
<select id="SEL_Countries" name="SEL_Countries" >
<option value='0'>Please Select A Country
<option selected value='USA'>USA
<option value='Norway'>Norway
<option value='Canada'>Canada
<option value='Mexico'>Mexico
</select>
<p>
<input onkeyup="FindCities()" onkeydown="DeleteText(this)"
onclick="DeleteText(this)" type="text" name="StartStedsNavn"
value="Type first letter in Place of Birth" size="29"></p>
<p>&nbsp;</p>
</form>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Place of Birth</p>
<iframe name='ifm1' src="USA_a.htm" width="222" height="197">
</body>
</html>

and data file "USA_a.htm":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>City data for USA starting with letter A</title>
</head>
<body>
<form name="myForm"
<p>
<select id="SEL_Cities" size="1">
<option>Please Select A City
<option>Alabama
<option>Alamo
<option>Albert
<option>Alexis
</select>
</p>
</form>
</body>
</html>

Using an alpabetical list and making the data files smaller.
- You have far better searching capability (soundex, indexes, other)

How do I do this?

Odin

Sep 28 '05 #4

P: n/a
Odin wrote:
Thank you for your answers [...]
Using an alpabetical list and making the data files smaller.

- You have far better searching capability (soundex, indexes, other)


How do I do this?


On the server, but that is a question for a group oriented toward your
particular server and database combination.

As for the client UI, try the google suggest page here - just start
typing into the text field and suggestions are made:

<URL:http://www.google.com/webhp?complete=1&hl=en>

More info:

<URL:http://serversideguy.blogspot.com/2004/12/google-suggest-dissected.html>


--
Rob
Sep 28 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.