I am trying to show list of Managers based on Department selected from a dropdown. I have written the below code. But Department list is duplicated many time(as many as number of managers for that department) and not showing the values in textarea based on department selected. Help plz.

Code:
<script>

  function setText(element){
  var arr_main=document.getElementById("txtHidStr").value.split("#");
  for(var i=0;i<arr_main.length;i++)
  {
       arr_val=arr_main[i].split("@");
       if(arr_val[0]==element.value)
       {
          document.getElementById("jDesc").innerHTML=arr_val[1];
          break;
       }
  }
  }

  </script>

below is JSP CODE.

<select  name="jTitle" id="jTitle"  onchange="setText(this)">
<%
String str=""; 
Statement stt = conn.createStatement();
ResultSet rstt = stt.executeQuery("SELECT DEPT_NAME, LM_NAME  FROM   UAP_DEPARTMENT inner join UAP_LINE_MANAGER_DETAILS on DEPT_DEPARTMENT_ID=LM_DEPARTMENT_ID");
while (rstt.next()) { 
str+=rstt.getString(1)+"@"+rstt.getString(2)+"#"; 
%>
<option value="<%=rstt.getString("DEPT_NAME")%>"><%=rstt.getString("DEPT_NAME")%>
</option>
<%
 }
stt.close();
rstt.close();
%>
</select>

<input type="hidden" name="txtHidStr" id="txtHidStr" value="<%=str %>" /> 

<textarea  rows="5" cols="15" name="jDesc" id="jDesc" ></textarea>