前一个select的值改变,后一个select跟随改变的方法:使用dwr的方法

来源:互联网 发布:新速特软件站增强版 编辑:程序博客网 时间:2024/06/14 02:08

jsp 页面中

<script type='text/javascript' src="<%=path%>/dwr/util.js"></script>
<script type='text/javascript' src="<%=path%>/dwr/engine.js"></script>
<script type='text/javascript' src="<%=path%>/dwr/interface/sysMenuService.js"></script>

<script type="text/javascript">    
      /**
      *根据用户选择菜单级别显示父级菜单选项
      */
     function showFatherMenu(){
     var selectVal=$("#istopmenu").val();
     document.getElementById("fatherMenu").options.length = 0; 
     sysMenuService.showFatherMenu(selectVal,function(data){
             for(var i=0;i<data.length;i++){
                $("#fatherMenu").append("<option value='"+data[i].menunumber+"'>"+data[i].menuname+"</option>"); 
             } 
        });
     
     }
</script>

form表单中的内容

<li><label class="label">菜单级别:</label><s:select id="istopmenu" cssClass="select" list="#{1:'一级菜单',2:'二级菜单',3:'三级菜单' }" name="sysMenu.istopmenu" style="width:300px;" value="" onchange="showFatherMenu()"></s:select></li>
<li><label class="label">父级菜单:</label><select id="fatherMenu" name="sysMenu.supermenuid" style="width:300px;"></select></li>

可以看出在菜单级别中:有三个值{1:'一级菜单',2:'二级菜单',3:'三级菜单' },通过onchange="showFatherMenu()"调用showFatherMenu函数,来感知list值的改变

当值改变之后,会根据list中选择的key来确定下面父级菜单的内容



在服务器端的代码

这个主要是写在service中,必须在service接口和service实现类中都的写上该方法

/**
* 根据用户选择的级别,选择对应的父级别
*/
public List<SysMenu> showFatherMenu(String selectVal){
List<SysMenu> list=new ArrayList<SysMenu>();
if(selectVal!=null||!"".equals(selectVal)){
int num=Integer.valueOf(selectVal);
String hql="from SysMenu where istopmenu=?";
try{
list=baseDAO.find(hql, new Object[]{(num-1)+""});
}catch(Exception e){
e.printStackTrace();
}
}
return list;

}

dwr.xml中的编写

<!-- 菜单信息验证 -->
<create creator="spring" javascript="sysMenuService">
<param name="beanName" value="sysMenuService"></param>
<include method="showFatherMenu" />
</create>

0 0
原创粉丝点击