Two Hoots Software Double Combo Javascript

The addsite page uses a double combo to allow you to select a category and sub-category for recommending a site. The contents of the second combo are dynamically changed, being dependant on the option you select in the first combo.

The Javascript can be broken down into 3 parts. The first part assigns the contents of the second combo to arrays. These arrays match the available options in the first combo.

// Setup arrays holding options for second combo box
// The second combo will change depending on the selection on the first combo

Developtext=new Array();
Developtext[1]="asp";
Developtext[2]="html";
Developtext[3]="javascript";
Developtext[4]="ms office";
Developtext[5]="web site services";
Developtext[6]="sql server";
Developtext[7]="visual basic";
Developtext[8]="web site builder";

Computingtext=new Array();
Computingtext[1]="clipart";
Computingtext[2]="fonts";
Computingtext[3]="hardware";
Computingtext[4]="screensaver/themes";
Computingtext[5]="software";
Computingtext[6]="sounds";

UsefulText=new Array();
UsefulText[1]="art";
UsefulText[2]="books";
UsefulText[3]="cars";
UsefulText[4]="cd's/videos and dvd's";
UsefulText[5]="concerts";
UsefulText[6]="diy";
UsefulText[7]="eCommerce";
UsefulText[8]="England";
UsefulText[9]="financial";
UsefulText[10]="food/drink";
UsefulText[11]="gardening";
UsefulText[12]="hobbies";
UsefulText[13]="holidays & travel";
UsefulText[14]="humour";
UsefulText[15]="jobs";
UsefulText[16]="local";
UsefulText[17]="media";
UsefulText[18]="music";
UsefulText[19]="pop groups";
UsefulText[20]="reference";
UsefulText[21]="shopping";
UsefulText[22]="training";
UsefulText[23]="world";

The second part processes the onChange event of the first combo. The index of the selected item is passed to the populate category function.

// Function - SelectCategory
// Description - Called on the onChange() event of the first combo box

function selectcategory(){
// Set num to the index of the selected item on the first combo

var num=document.myform.category.selectedIndex;

// Depending on which option selected on first combo, 
// populate the contents of the second combo

if (num==1) {populateCategory(Developtext);}
if (num==2) {populateCategory(Computingtext);}
if (num==3) {populateCategory(UsefulText);}
}

The final part populates the second combo with the values in the array indexed from the SelectCategory function.

// Function - PopulateCategory
// Description - Populates the second combo on the addsite page from 
//               the selection on the first combo

function populateCategory(mySitestext){

// First clear the current entries in the second combo box

for (count=document.myform.subcategory.options.length-1;count>0;count--){
document.myform.subcategory.options[count].text="";
}
// Set first entry in the second combo, this is displayed initially

document.myform.subcategory.options[0].text = "Select a category";

// Now loop through all the elements of the passed array to populate the second combo
for (count=1;count<mySitestext.length;count++){
document.myform.subcategory.options[count].text=mySitestext[count];
}
// Set the first entry as selected
document.myform.subcategory.options[0].selected=true;
}