Changing Selection Boxes Problem??

[John Ryan]

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>

[Lasse Reichstein Nielsen]

"John Ryan" <ce************@iol.ie> writes:

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">
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.
var logos = new Array();
logos[0] = "Abstract";
logos[1] = "Adult";
logos[2] = "Animals";
This can be written as just

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

It is much shorter. 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
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:
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];

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

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

[Lasse Reichstein Nielsen]

Lasse Reichstein Nielsen <lr*@hotpop.com> writes:

//clearing loop
for (i = 0; i < document.browse_form.category.options.length; i++){

I.e., either (inside the loop)
document.forms['browse_form'].elements['category'].options[i] = null

.... 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 - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'