Two related dropdown lists...

[zakman]

I have an ASP that contains two dropdown listboxes.
The first is populated with departments, the second
is to be populated with people that belong to the
department that was selected in the first dropdown
list.

This is easy to do in VB, but for some reason, I am
not sure how to implement this in an ASP. I would
like to effectively set a "filter" on the second list
depending on which dept was selected in the first list.

Any ideas?

 

[SashiRaveendran]

in your first select box of departments put an onchange event handler in there that submits the form with the newly selected department ie

<%
if request.form(&quot;Dept&quot <>&quot;&quot; then
' go get all the people in the request.form(&quot;Dept&quot
' get recordset
end if
%>


<form action=&quot;yourASP.asp&quot; name=&quot;Frm&quot; method=&quot;post&quot;>
Department:&nbsp;<select Name=&quot;dept&quot; onchange=&quot;document.Frm.submit()&quot;>
<option value=&quot;DeptA&quot;>DeptA
<option value=&quot;DeptB&quot;>DeptB
<option value=&quot;DeptC&quot;>DeptC
<option value=&quot;DeptD&quot;>DeptD
</select>
<br>
if request.form(&quot;Dept&quot <>&quot;&quot;
if not (rs(&quot;Depts&quot.EOF and rs(&quot;Depts&quot.BOF) then%>
People:&nbsp;<select Name=&quot;peeps&quot;>
<% for .... %>
<option value=&quot;<%=...%>&quot;><%=...%>
<% next %>
</select>
<% else %>
NO people in this dept
<%end if
end if%>



</form>

 

[zakman]

Ideally, I would like to send the entire recordset of people & their department identifier to the client's browser. This way I have all the data I need to work with on the client. I was hoping that there is some sort of client ActiveX control that I might be able to use to &quot;filter&quot; the people according to the department that was selected in the other dropdown listbox.

Any ideas?

 

[SashiRaveendran]

in javascript create a 2 column array 1 column has a name in it and the second column holds that persons deptID

when the onchange event happens loop through the array looking for the passed in deptID in the array and when you find it add the name to the people option list. Note every time the onchange occurs you would have to reset the people drop down list:


<script language=javascript>
//lTotPeople is the total number of people to be put in the array

var myarray=new Array(<%=lTotPeople%>)

// 2 represents the no. of cols in your array
for (i=0; i <2; i++) myarray=new Array(2)

// populate client side people array with server side
// people array data (arrPeople could be replaced with a recordset)
<% for i = 0 to lTotPeople-1%>
myarray[<%=i%>][0] = &quot;<%=arrPeople(0,i)%>&quot; //arrPeople(0,i) represents persons name
myarray[<%=i%>][1] = &quot;<%=arrPeople(1,i)%>&quot; //arrPeople(1,i) represents deptID
<% next %>


So the above code gets the people on the client into a javascript array

now your onchange handler function has to change to:

<script language=javascript>
function ChangePeople(deptID)
{
var optionlist = &quot;&quot;;
for (i=0;i<<%=lTotPeople%>;i++)
{
if (deptID==myarray[1])
{
optionlist+=&quot;<option value='&quot;+myarray[0]+&quot;'>&quot;+myarray[0];
}
}
PeopleList.innerHTML = optionlist;
}

</script>


change Select Boxes to:

Department:&nbsp;<select Name=&quot;dept&quot; onchange=&quot;ChangePeople(this.value)&quot;>
<% for j=0 to lTotDept %>
<option value=&quot;<%=arrDept(0,j) ' departmentID%>&quot;><%=arrDept(1,j)%>
<% next %>
</select><br>

People:&nbsp;<select id=PeopleList>
<option value=&quot;&quot;>select department from list above
</select>