html form

[bess]

I have an html form that when you select county, and there are 12 of them, populates a drop down list with a town. It works, but now I want the user to select multiple towns. I put "atran[]" mutiple in the select code, and now the twon array does not show. all of the code looks like this: The problem statemnt is at the end. Any help would be greatly appreciated.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">


atran = new Array(12)
atran [0] = new Array(1)
atran [1]= new Array(2)
atran [2] = new Array(3)
atran [3] = new Array(4)
atran [4] = new Array(5)
atran [5]= new Array(6)
atran [6] = new Array(7)
atran [7] = new Array(8)
atran [8] = new Array(9)
atran [9]= new Array(10)
atran [10] = new Array(11)
atran [11] = new Array(12)
atran [12] = new Array(13)

//Empty (0)
atran [0][0.0] = "%"
atran [0][0.1] = "--- All Locations ---"
//Allegany (1)
atran [1][0.0] = "%"
atran [1][0.1] = "--- All Locations ---"
atran [1][1.0] = "Alfred"
atran [1][1.1] = "Alfred"

more towns
//Ontario (2)
atran [2][0.0] = "%"
atran [2][0.1] = "--- All Locations ---"
atran [2][1.0] = "Bloomfield Village"
atran [2][1.1] = "Bloomfield Village"
atran [2][2.0] = "Bloomfield-West"
more towns for ontario

//Genesee (3)
atran [3][0.0] = "%"
atran [3][0.1] = "--- All Locations ---"
atran [3][1.0] = "Alabama"
atran [3][1.1] = "Alabama"

more towns

More counties

//Monroe (4)

//Livingston (5)


even more counties and towns
//============================================
//Next, we create a function to fill the second drop down from
//the array based on the item selected in the first drop down.
function FillList()
{
var num=document.searchform.cnty.selectedIndex
var boxlength = 0

document.searchform.atran.selectedIndex = 0
for ( ctr=0;ctr<atran[num].length;ctr++)
{
boxlength++;
document.searchform.atran.options[ctr] = new Option(atran[num] [eval(ctr + ".1")], atran[num][eval(ctr + ".0")]);
}


document.searchform.atran.length = boxlength;
document.searchform.atran.options.length = boxlength;
document.searchform.atran.focus() ;


}


//-->
</SCRIPT>





<FORM action="resultssingle.php" method=get id=form1 name=searchform>




<table width="777" cellpadding="0" cellspacing="0" >
<tr>


<td VALIGN="TOP">



Load map
<imgsrc=http://www.tyrrellconsulting.com/realtors/pictures/7COUNTYMAP.gif width=250 border=0 OnError=ImageLoadFailed()>
</TD>






<TD VALIGN="TOP" WIDTH=220><FONT Face = "Arial" COLOR="#000000" Size ="2" ><b>
County </b>
<BR><SELECT id=select1 name=cnty onChange="JavaScript:FillList()">
<OPTION value="%" selected>--- All Counties ---</OPTION>
<OPTION value="Allegany">Allegany</OPTION>
<OPTION value="Ontario">Ontario</OPTION>
<OPTION value="Genesee">Genesee</OPTION>
<OPTION value="Monroe">Monroe</OPTION>
<OPTION value="Livingston">Livingston</OPTION>
<OPTION value="Orleans">Orleans</OPTION>
<OPTION value="Seneca">Seneca</OPTION>
<OPTION value="Steuben">Steuben</OPTION>
<OPTION value="WOLORayne">Wayne</OPTION>
<OPTION value="Wyoming">Wyoming</OPTION>
<OPTION value="Yates">Yates</OPTION>
<OPTION value="Other">Other</OPTION>
</SELECT>

<BR><BR><FONT = Arial COLOR="#000000" Size "2"><b>Select Location

//Trouble SPOT TROUBLE SPOT TROUBLE SPOT
<BR> <SELECT id=select2 name=atran Multiple SIZE=8>
<OPTION value="%" selected>--- Select County ---</OPTION>
</SELECT>

[Fang]

<script type="text/javascript">
<!--
var atran = [];

//Empty (0)
atran [0] =[];
atran [0][0] = "%";
atran [0][1] = "--- All Locations ---";

//Allegany (1)
atran [1] =[];
atran [1][0] = "%";
atran [1][1] = "--- All Locations ---";
atran [1][2] = "Alfred";
atran [1][3] = "Alfred";

//Ontario (2)
atran [2] =[];
atran [2][0] = "%";
atran [2][1] = "--- All Locations ---";
atran [2][2] = "Bloomfield Village";
atran [2][3] = "Bloomfield Village";
atran [2][4] = "Bloomfield-West";

//Genesee (3)
atran [3] =[];
atran [3][0] = "%";
atran [3][1]= "--- All Locations ---";
atran [3][2] = "Alabama";
atran [3][3] = "Alabama";

//Monroe (4)

//Livingston (5)


//============================================
//Next, we create a function to fill the second drop down from
//the array based on the item selected in the first drop down.
function FillList()
{
var num=parseInt(document.searchform.cnty.selectedIndex);
for(var i=0; i<document.searchform.atran.options.length; i++)
{
document.searchform.atran.options[i] = null;
}
for (var ctr=0;ctr<atran[num].length;ctr++)
{
document.searchform.atran.options[ctr] = new Option(atran[num] [ctr], atran[num][ctr]);
}
document.searchform.atran.focus();
}
//-->
</script>