DWR可扩展无级级连下拉菜单的代码例子

本文链接：https://blog.csdn.net/shadowkiss/article/details/4046052

此类级连下拉列表常用到，此处的代码其实是由ssh框架写成，由于代码比较多，我只取了前端的js脚本和dwr配置文件。其它的代码大家自己意会：）

本代码的亮点：

1、经过极少的修改就可以应用于N级下拉列表。

2、采用了自动判断是否要隐藏控件达到醒目的效果。

3、各类浏览器兼容性好

dwr.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.org/dwr/dwr20.dtd">
<dwr>
    <allow>
        
        <convert match="cn.qdqn.demo.biz.Databiz" converter="bean" />
        <convert match="cn.qdqn.demo.entity.Data" converter="bean" />
        
        <create creator="spring" javascript="DataFinder">
            <param name="beanName" value="DataFinder" />
        </create>
    </allow>
</dwr>

前端代码

<%@ page language="java" pageEncoding="UTF-8"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
<head>
    <html:base />

    <title>select.jsp</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    <script type='text/javascript'
        src='/ssha_3_layer_menu_select/dwr/interface/DataFinder.js'></script>
    <script type='text/javascript'
        src='/ssha_3_layer_menu_select/dwr/engine.js'></script>

    <script type='text/javascript'
        src='/ssha_3_layer_menu_select/dwr/util.js'></script>
    <script type="text/javascript">

        var selectIds = ['pro','city','cou'];//三级级连有几级就在这按顺序写好


        //把一个select控件初始化
        function resetSelect(ele){
            var sign = false;
            for(var i = 0; i<selectIds.length; i++){
                if(ele == selectIds[i]){
                    sign = true;
                    $(selectIds[i]).style.display='inline';
                    $(selectIds[i]).disabled=false;
                    continue;
                }
                if(sign){
                    $(selectIds[i]).style.display='none';
                }
            }
        }

        //找到级连的下一个元素
        function findNextId(ele){
            for(var i = 0; i<selectIds.length; i++){
                if(ele == selectIds[i]){
                    if (i<selectIds.length-1){
                        return selectIds[i+1];
                    }
                }
            }
            return null;
        }

        //生成数据
        function ajaxSelect(ele, data, value, label){
            resetSelect(ele);
            DWRUtil.removeAllOptions(ele);
            DWRUtil.addOptions(ele,[{value:0, label:'请选择...'}],'value','label');
            DWRUtil.addOptions(ele, data, value, label);
            DWRUtil.yellowFadeHighlightHandler(ele);//呵呵，让变动的控件变成黄色，很醒目！
            //DWRUtil.highlight(ele);
        }