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="JavaS cript1.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_message s = new Array();
picture_message s[0] = "Adult";
picture_message s[1] = "Animals";
picture_message s[2] = "Brands";
picture_message s[3] = "Cartoons";
picture_message s[4] = "Celebratio nw";
picture_message s[5] = "Faces";
picture_message s[6] = "Music";
picture_message s[7] = "Romance";
picture_message s[8] = "Smokin";
picture_message s[9] = "Sports";
picture_message s[10] = "Tvandmovie s";
picture_message s[11] = "World";
picture_message s[12] = "Spider-Man";
picture_message s[13] = "Transport" ;
picture_message s[14] = "Cliparts";
picture_message s[15] = "Cute";
picture_message s[16] = "Football";
picture_message s[17] = "Holidays";
picture_message s[18] = "Misc";
picture_message s[19] = "Sexy Comics";
picture_message s[20] = "Space";
picture_message s[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.brows e_form.content. options[counter].selected == true){
var choice = document.browse _form.content.o ptions[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_messag es"){
array1 = picture_message s;
}//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_fo rm">
<select name="category" >
<option value="Abstract ">Abstract</option>
<option value="Adult">A dult</option>
<option value="Animals" >Animals</option>
<option value="Company Logos">Company Logos</option>
<option value="Computer ">Computer</option>
<option value="Cute">Cu te</option>
<option value="Danger"> Danger</option>
<option value="Eyes">Ey es</option>
<option value="Food Drink">Food Drink</option>
<option value="Football ">Football</option>
<option value="Horror"> Horror</option>
<option value="Kids">Ki ds</option>
<option value="Love">Lo ve</option>
<option value="Misc">Mi sc</option>
<option value="Music">M usic</option>
<option value="Objects" >Objects</option>
<option value="People"> People</option>
<option value="Phone">P hone</option>
<option value="Places"> Places</option>
<option value="Religion ">Religion</option>
<option value="Seasonal ">Seasonal</option>
<option value="Space">S pace</option>
<option value="Sports"> Sports</option>
<option value="Transpor t">Transport </option>
<option value="TV Film">TV Film</option>
<option value="Weapons" >Weapons</option>
<option value="Zodiac"> Zodiac</option>
</select>
<select name="content" onChange="loadb ox2()">
<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="resultspe rpage" value="20">
<input type="submit" name="Submit" value="Go!">
</form>

[Lasse Reichstein Nielsen]

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="JavaS cript1.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/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Lasse Reichstein Nielsen]

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/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'