I am using the function below to generate a drop down list. My problem is that I am trying to reuse the list 3 times on the same page, but the list will not populate after the first. Any help would be appreciated. Thanks
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT>
function populate()
{
var selectBox2 = document.getElementById('s
electBox2'
);
for( i = 0; selectBox2.length > 0; i++ )
{
selectBox2.options[i] = null;
if( selectBox2.length > 0 )
selectBox2.length--;
}
if( document.getElementById('s
electBox1'
).options[
document.g
etElementB
yId('selec
tBox1').se
lectedInde
x].value == "admin" )
{
selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );
selectBox2.options[1] = new Option( 'Financial Services', 'Financial Services' );
if( document.getElementById('s
electBox3'
).style.di
splay != 'none' )
document.getElementById('s
electBox3'
).style.di
splay = 'none';
}
if( document.getElementById('s
electBox1'
).options[
document.g
etElementB
yId('selec
tBox1').se
lectedInde
x].value == "adult" )
{
selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );
selectBox2.options[1] = new Option( 'www', 'www' );
if( document.getElementById('s
electBox3'
).style.di
splay != 'none' )
document.getElementById('s
electBox3'
).style.di
splay = 'none';
}
if( document.getElementById('s
electBox1'
).options[
document.g
etElementB
yId('selec
tBox1').se
lectedInde
x].value == "fss" )
{
selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );
selectBox2.options[1] = new Option( 'Offices', 'Offices' );
selectBox2.options[2] = new Option( 'Operations', 'Operations' );
selectBox2.options[3] = new Option( 'Program', 'Program' );
if( document.getElementById('s
electBox3'
).style.di
splay != 'none' )
document.getElementById('s
electBox3'
).style.di
splay = 'none';
}
if( document.getElementById('s
electBox1'
).options[
document.g
etElementB
yId('selec
tBox1').se
lectedInde
x].value == "cfs" )
{
selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );
selectBox2.options[1] = new Option( 'ddd', 'ddd' );
selectBox2.options[2] = new Option( 'aaa', 'aaa' );
selectBox2.options[3] = new Option( 'bbb', 'bbb' );
if( document.getElementById('s
electBox3'
).style.di
splay != 'none' )
document.getElementById('s
electBox3'
).style.di
splay = 'none';
}
else
{
selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );
selectBox2.options[1] = new Option( 'nnn', 'nnn' );
selectBox2.options[2] = new Option( 'nnn', 'nnn' );
if( document.getElementById('s
electBox3'
).style.di
splay != 'block' )
document.getElementById('s
electBox3'
).style.di
splay = 'block';
}
}
</SCRIPT>
</head>
<body>
<table><tr>
<td><br>
<select name="div1" class="text" ID="selectBox1" onChange="populate();">
<option value="0">Select Division</option>
<option value="admin">Administrati
ve Services</option>
<option value="adult">Adult Services</option>
<option value="assist">Assistance Programs</option>
<option value="cfs">Children and Family Services</option>
<option value="fss">Family Self Sufficiency</option>
</select>
</td>
<td bgcolor="#FFFFFF"><select name="program1" ID="selectBox2">
<option value="0">Select Organization</option>
</select>
</td>
</tr></table>
</body>
</html>
