比如一个select显示所有部门，另一个select显示该部门的所有员工。

    为了达到这种效果，肯定要先从数据库中取出部门，为第一个select加载选项，然后根据所选择的选项，从数据库中取出属于该部门的所有员工，为第二个select加载选项。此即所谓二级联动。多级则继续根据条件查询、加载，操作一样。

    要把数据加载到网页元素很容易，因为服务器端脚本可以嵌入到客户端脚本里。如可以有如下形式：

    document.myform.selectname.options[index].value=<%=value%>;

    关键是如何把第一个select所选择的值传到第二个select，准确来说是传递参数给下一个查询语句，像<% UserDB.getBySection (section);%>的section。也就是把客户端脚本的值传到服务器脚本的变量。如果可以这样就好了：

    <%value%>=document.myform.selectname.options[index].value;

可惜不行。

    客户端脚本要向服务器端脚本传值，只能通过网络，也就是向服务器端发送请求，并把这些值通过参数传过去。

    可以在改变选项时触发表单的提交：

    onChange="action='webname.jsp';target='_self';submit();"

    表单将参数传回本页面，就可以用服务器脚本获取了：

    <%String section=request.getParameter("section");%>

 

    问题是，页面一开始显示时，并不会触发onChange事件，也就是说所得到的section初值为空，这样第二个select一开始就不能正确显示了，而只能是用户先在第一个select中选择了其他选项，再回头选第一个选项的时候才行。

    解决办法是在页面加载完成时就触发第一个select的onChange事件。

    也可以定义一个变量来保存select第一个选项的值，实质是从数据库中按条件取出来的第一个值：

    <%

    vector=UserDB.getSection();

    initsection=vector.elementAt(0).toString();

    %>

    页面加载时，select还没有被onChange过，因而section为空，于是选项应该加载第一个section，也就是initsection：

    <% vector=UserDB.getBySection(initsection); %>

 

    另外，当两次选择同一选项时，select并没有被change，所以也不会触发onChange事件。要在这种情况下触发onChange事件，最简单的方法是在每次选择后将当前选项改回初始值：

    document.all.selectname.options[0].selected=true;

这个选项(options[0])应该是用户不会选择的选项，也就是不会被change的选项，像以下这样的：

    <option value="">请选择

这样，每选择一次其他选项，即使重复选择同一个选项，也可以触发onChange了。