Display Javascript array value OnChange instead of Bean value

Question

I intially loop through a collection of employees display the values within the employee loop I have a select statement that i loop through a collection of programs that has on OnChange. I want to display the javascript value instead of the bean value onChange. The following code displays the bean value initally and onChange it displays both because the if is never false?
*<c:if test="${programs[programIndex] != emps.department}">${emps.department}</c:if>*
* <div id="programText"> </div>*
* <input name="department" type="hidden" id="department">*
JSP page
<jsp:useBean id="programs" scope="request" class="java.util.Collection"/>
<jsp:useBean id="employeeList" scope="request" class="java.util.Collection"/>
<script language="JavaScript" type="text/javascript">
var programs = new Array();
function setProgramFields() {
nameField = document.getElementById("programList");
idx = nameField.selectedIndex;
emField = document.getElementById("programText");
emHiddenField = document.getElementById("department");
emField.innerHTML = programs[idx];
emHiddenField.value = programs[idx];
<c:forEach var="emps" items="${employeeList}">
<td width="170px">
*<c:if test="${programs[programIndex] != emps.department}">${emps.department}</c:if>*
* <div id="programText"> </div>*
* <input name="department" type="hidden" id="department">*
</td>
<td width="275px">
<div class="selectBorder">
<select name="programName" type="text" class="searchProgram" id="programList" onChange="setProgramFields()">
<c:set var="programIndex" value="0"/>
<c:forEach var="sp" items="${programs}">
<c:if test="${sp.programName == emps.programName}">
<option value="${emps.programName}" selected="selected">${emps.programName}</option>
</c:if>
<c:if test="${sp.programName != emps.programName}">
<option value="${sp.programName}">${sp.programName}</option>
</c:if>
<script language="JavaScript" type="text/javascript">
programs[${programIndex}] = "${sp.department}";
</script>
<c:set var="programIndex" value="${programIndex + 1}"/>
</c:forEach>
</select>
</div>
</td>
</c:forEach>
Edited by: kmb_ms on Sep 15, 2008 2:38 PM

Answer 1

Apologize for not formatting the code. I used the status.index the code as suggested. The code if more efficient but the results are the same and I still have the same problem.
<select name="programName" type="text" class="searchProgram" id="programList" onChange="setProgramFields()">
<c:forEach var="sp" items="${programs}" varStatus="status">
<c:if test="${sp.programName == emps.programName}">
<option value="${emps.programName}" selected="selected">${emps.programName}</option>
</c:if>
<c:if test="${sp.programName != emps.programName}">
<option value="${sp.programName}">${sp.programName}</option>
</c:if>
<script language="JavaScript" type="text/javascript">
departments[${status.index}] = "${sp.department}";
</script>
</c:forEach>
</select> How can I access the value of the array to compare with the value of the bean.
<script language="JavaScript" type="text/javascript">
var departments = new Array();
function setProgramFields() {
nameField = document.getElementById("programList");
idx = nameField.selectedIndex;
emField = document.getElementById("departmentText");
emHiddenField = document.getElementById("department");
emField.innerHTML = departments[idx];
emHiddenField.value = departments[idx];
</script>The following code displays both the value of the bean and the value of the array onChange b/c the if statement is always true???? This is where I need help.
<td width="170px">
     <c:if test="${departments[idx] != emps.department}">${emps.department}</c:if>
     <div id="departmentText"> </div>
     <input name="department" type="hidden" id="department">
</td>