Changing Selection Boxes Problem??

I've a small bit of javascript on my site that has a from with 2 selection
boxes, when you choose an option in the first box, the second one
re-populates its list accordingly.

But the second selection box can have varying amounts of entries, and this
means theres a lot of white spaces in the second selection box sometimes. Is
there any way to eliminate this? Here's my code:

<script language="JavaScript1.2">
<!--
var logos = new Array();
logos[0] = "Abstract";
logos[1] = "Adult";
logos[2] = "Animals";
logos[3] = "Company Logos";
logos[4] = "Computer";
logos[5] = "Cute";
logos[6] = "Danger";
logos[7] = "Eyes";
logos[8] = "Food Drink";
logos[9] = "Football";
logos[10] = "Horror";
logos[11] = "Kids";
logos[12] = "Love";
logos[13] = "Misc";
logos[14] = "Music";
logos[15] = "Objects";
logos[16] = "People";
logos[17] = "Phone";
logos[18] = "Places";
logos[19] = "Religion";
logos[20] = "Seasonal";
logos[21] = "Space";
logos[22] = "Sports";
logos[23] = "Transport";
logos[24] = "TV Film";
logos[25] = "Weapons";
logos[26] = "Zodiac";

var animated_logos = new Array();
animated_logos[0] = "Adult";
animated_logos[1] = "Animals";
animated_logos[2] = "Cartoons";
animated_logos[3] = "Enviroment";
animated_logos[4] = "Faces";
animated_logos[5] = "Games";
animated_logos[6] = "Misc";
animated_logos[7] = "Music";
animated_logos[8] = "Romance";
animated_logos[9] = "Scary";
animated_logos[10] = "Space";
animated_logos[11] = "Sport";
animated_logos[12] = "Transport";
animated_logos[13] = "Tv And Movies";
animated_logos[14] = "World";

var picture_messages = new Array();
picture_messages[0] = "Adult";
picture_messages[1] = "Animals";
picture_messages[2] = "Brands";
picture_messages[3] = "Cartoons";
picture_messages[4] = "Celebrationw";
picture_messages[5] = "Faces";
picture_messages[6] = "Music";
picture_messages[7] = "Romance";
picture_messages[8] = "Smokin";
picture_messages[9] = "Sports";
picture_messages[10] = "Tvandmovies";
picture_messages[11] = "World";
picture_messages[12] = "Spider-Man";
picture_messages[13] = "Transport";
picture_messages[14] = "Cliparts";
picture_messages[15] = "Cute";
picture_messages[16] = "Football";
picture_messages[17] = "Holidays";
picture_messages[18] = "Misc";
picture_messages[19] = "Sexy Comics";
picture_messages[20] = "Space";
picture_messages[21] = "Tattoos";

function loadbox2(){
//clearing loop
for (i = 0; i < document.browse_form.category.options.length; i++){
document.browse_form.category.options[i].text = "";
document.browse_form.category.options[i].value = "";
}//ends clearing FOR loop


for (counter=0; counter < 3; counter++){
if (document.browse_form.content.options[counter].selected == true){
var choice = document.browse_form.content.options[counter].value;
}
}
if (choice =="logos"){
array1 = logos;
}//ends first (female) IF

if (choice == "animated_logos"){
array1 = animated_logos;
}//ends second (male) IF
if (choice == "picture_messages"){
array1 = picture_messages;
}//ends second (male) IF
for (i = 0; i < array1.length; i++){
document.browse_form.category.options[i].text = array1[i];
document.browse_form.category.options[i].value = array1[i];
}// ends populating FOR
}//ends function loadbox2

//-->
</script>
<form action="browse/" method="post" name="browse_form">
<select name="category">
<option value="Abstract">Abstract</option>
<option value="Adult">Adult</option>
<option value="Animals">Animals</option>
<option value="Company Logos">Company Logos</option>
<option value="Computer">Computer</option>
<option value="Cute">Cute</option>
<option value="Danger">Danger</option>
<option value="Eyes">Eyes</option>
<option value="Food Drink">Food Drink</option>
<option value="Football">Football</option>
<option value="Horror">Horror</option>
<option value="Kids">Kids</option>
<option value="Love">Love</option>
<option value="Misc">Misc</option>
<option value="Music">Music</option>
<option value="Objects">Objects</option>
<option value="People">People</option>
<option value="Phone">Phone</option>
<option value="Places">Places</option>
<option value="Religion">Religion</option>
<option value="Seasonal">Seasonal</option>
<option value="Space">Space</option>
<option value="Sports">Sports</option>
<option value="Transport">Transport</option>
<option value="TV Film">TV Film</option>
<option value="Weapons">Weapons</option>
<option value="Zodiac">Zodiac</option>
</select>
<select name="content" onChange="loadbox2()">
<option value="logos" selected>Nokia Operator Logos</option>
<option value="picture_messages">Nokia Picture Messages</option>
<option value="animated_logos">Nokia Animated Logos</option>
</select>
<input type="hidden" name="browse_by" value="category">
<input type="hidden" name="offset" value="1">
<input type="hidden" name="resultsperpage" value="20">
<input type="submit" name="Submit" value="Go!">
</form>

re: Changing Selection Boxes Problem??

"John Ryan" <celticfcNOSPAM@iol.ie> writes:
[color=blue]
> I've a small bit of javascript on my site that has a from with 2 selection
> boxes, when you choose an option in the first box, the second one
> re-populates its list accordingly.
>
> But the second selection box can have varying amounts of entries, and this
> means theres a lot of white spaces in the second selection box sometimes. Is
> there any way to eliminate this? Here's my code:[/color]
[color=blue]
>
> <script language="JavaScript1.2">[/color]

Unless you *know* the difference between JavaScript 1.2 and 1.3, you
probably don't want to use 1.2. Just write
<script type="text/javascript">
The "type" attribute is required in HTML 4, and it is sufficient.
[color=blue]
> var logos = new Array();
> logos[0] = "Abstract";
> logos[1] = "Adult";
> logos[2] = "Animals";[/color]

This can be written as just

var logos = [
"Abstract",
"Adult",
"Animals",
...
"Zodiac"
];

It is much shorter.[color=blue]
> function loadbox2(){
> //clearing loop
> for (i = 0; i < document.browse_form.category.options.length; i++){
> document.browse_form.category.options[i].text = "";
> document.browse_form.category.options[i].value = "";
> }//ends clearing FOR loop[/color]

To clear the options, either assign "null" to each, or just remove
them completely.
I.e., either (inside the loop)
document.forms['browse_form'].elements['category'].options[i] = null
or (instead of the loop)
document.forms['browse_form'].length = 0;

This removes the option elements, so you need to add new:
[color=blue]
> for (i = 0; i < array1.length; i++){
> document.browse_form.category.options[i].text = array1[i];
> document.browse_form.category.options[i].value = array1[i];[/color]

Change these two lines to:
---
document.forms['browse_form'].elements['category'].options[i] =
new Option(array1[i],array1[i]);
---

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

re: Changing Selection Boxes Problem??

Lasse Reichstein Nielsen <lrn@hotpop.com> writes:
[color=blue][color=green]
>> //clearing loop
>> for (i = 0; i < document.browse_form.category.options.length; i++){[/color][/color]
[color=blue]
> I.e., either (inside the loop)
> document.forms['browse_form'].elements['category'].options[i] = null[/color]

.... but don't do this while counting up, since it changes the length
of the options collection. Count down instead or use the other method.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'