Dropdown – Dynamic Optgroup label

I’d like to add an option group label to the drop down that is dynamically populated according to the array in the js. How would i do that?

[B]HTML:[/B]
<table width=”95%” border=”0″ cellspacing=”2″ cellpadding=”2″ align=”center” style=”font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal;”>

<tr>

<td width=”47%”>Campus<br />
<select name=”field1″ id=”field1″ style=”width:200px” onchange=”NarrowDownPrograms308()” >
<option value=”” selected=”selected”>Please Select</option>
<option value=”Campus1″>Campus1</option>
<option value=”Campus2″>Campus2</option>
<option value=”Campus3″>Campus3</option>
</select></td>
<td width=”45%”>Program of Interest<br />
<select name=”fieldf” id=”fieldf” style=”width:300px”>
<option value=”” selected=”selected”>Please Select</option>
</select></td>

</tr>
</table>

[B]JAVASCRIPT:[/B]
<script type=”text/javascript”>
var mappingCampus = new Array
(“Campus1″,”Associate Of Applied Science Degree Program”,”Criminal Justice”,
“Campus1″,”Associate Of Applied Science Degree Program”,”Health Information Technology”,
“Campus1”,”Certificate Programs “,”Cosmetology”,
“Campus1”,”Certificate Programs “,”Esthetics Technology”,
“Campus1″,”Diploma Programs”,”Therapeutic Massage”,
“Campus2″,”Associate Of Applied Science Degree Program”,”Accounting”,
“Campus2″,”Associate Of Applied Science Degree Program”,”Cosmetology”,
“Campus2”,”Certificate Programs “,”Esthetics Technology”,
“Campus2”,”Certificate Programs “,”Sterile Processing”,
“Campus2″,”Diploma Programs”,”Cosmetology”,
“Campus2″,”Diploma Programs”,”Healthcare Assistant”,
“Campus3”,”Associate Of Applied Science Degree Program “,”Administrative Office Technology”,
“Campus3”,”Associate Of Applied Science Degree Program “,”Criminal Justice”,
“Campus3″,”Certificate Programs”,”Esthetics Technology”,
“Campus3″,”Diploma Programs”,”Healthcare Assistant”,
“Campus3″,”Diploma Programs”,”Massage Therapy”
)

function removeAllOptions(selectbox){
var count;
var length = selectbox.options.length;
for (count = 1 ; count < length; count++)
selectbox.remove(1);
}

function NarrowDownPrograms308()
{
var selObject = document.getElementById(“field1”);
var selIndex = selObject.selectedIndex;
var selValue = selObject.options[selIndex].value;
var length = mappingCampus.length / 3;
var optn;
var chk = document.getElementById(“fieldf”);
removeAllOptions(chk);

for (var i = 0; i < length; i++)
{
if (selValue == mappingCampus[i * 3])
{

chk.options[chk.options.length] = new Option(mappingCampus[i * 3 + 2], mappingCampus[i * 3 + 2]);

}
}

}

</script>

Also in #JavaScript _↴