作者:mobiledu2502859163 | 来源:互联网 | 2023-10-11 05:40
比如一个select显示所有部门,另一个select显示该部门的所有员工。
为了达到这种效果,肯定要先从数据库中取出部门,为第一个select加载选项,然后根据所选择的选项,从数据库中取出属于该部门的所有员工,为第二个select加载选项。此即所谓二级联动。多级则继续根据条件查询、加载,操作一样。
要把数据加载到网页元素很容易,因为服务器端脚本可以嵌入到客户端脚本里。如可以有如下形式:
document.myform.selectname.options[index].value=;
关键是如何把第一个select所选择的值传到第二个select,准确来说是传递参数给下一个查询语句,像的section。也就是把客户端脚本的值传到服务器脚本的变量。如果可以这样就好了:
=document.myform.selectname.options[index].value;
可惜不行。
客户端脚本要向服务器端脚本传值,只能通过网络,也就是向服务器端发送请求,并把这些值通过参数传过去。
可以在改变选项时触发表单的提交:
OnChange="action='webname.jsp';target='_self';submit();"
表单将参数传回本页面,就可以用服务器脚本获取了:
问题是,页面一开始显示时,并不会触发onChange事件,也就是说所得到的section初值为空,这样第二个select一开始就不能正确显示了,而只能是用户先在第一个select中选择了其他选项,再回头选第一个选项的时候才行。
解决办法是在页面加载完成时就触发第一个select的onChange事件。
也可以定义一个变量来保存select第一个选项的值,实质是从数据库中按条件取出来的第一个值:
vector=UserDB.getSection();
initsection=vector.elementAt(0).toString();
%>
页面加载时,select还没有被onChange过,因而section为空,于是选项应该加载第一个section,也就是initsection:
另外,当两次选择同一选项时,select并没有被change,所以也不会触发onChange事件。要在这种情况下触发onChange事件,最简单的方法是在每次选择后将当前选项改回初始值:
document.all.selectname.options[0].selected=true;
这个选项(options[0])应该是用户不会选择的选项,也就是不会被change的选项,像以下这样的:
请选择
这样,每选择一次其他选项,即使重复选择同一个选项,也可以触发onChange了。