多级菜单联动

1.
<head>
    <title>运维平台</title>
    <link rel="stylesheet" type="text/css" href="/static/Css/Deploy/deploy.css">
    <link rel="stylesheet" type="text/css" href="/static/Css/Public/header.css">
    <link rel="stylesheet" type="text/css" href="/static/Css/Public/menu.css">
</head>
<body>
    <include file="Public:header"/>
    <div class="content">
        <include file="Public:menu"/>
        <div class="con fl">
        <label class="condition">应用系统</label>
        <select name="application" class="monitor">
            </select>
            <label class="condition">发布机器</label>
            <select name="deploymachine" class="monitor">
            </select>
            
            <label class="condition">发布用户</label>
            <select name="deployuser" class="monitor">
            </select>
            <label class="condition">发布版本包</label>
            <select name="deploypkg" class="monitor">
            </select>
    
            <input type="submit" value="发布应用" class="publish">

            <input type="submit" value="查看应用发布情况" class="check">
        </div>
                    <table class="gridtable fr">
            <tr><th>消息</th></tr>
        </table>
    </div>
</body>
<script type="text/javascript" src="/static/Js/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="/static/Js/Deploy/deploy.js"></script>
<!script type="text/javascript" src="/static/Js/Public/menu.js"><!/script>
<script type="text/javascript" src="/static/Js/Public/ajax.js"></script>
</html>

2.
$(function(){
          var _env_select = $("select[name='application']");
        var _ip_select = $("select[name='deploymachine']");
        var _user_select = $("select[name='deployuser']");
        var _queue_select = $("select[name='deploypkg']");
        var _table = $("table.gridtable");
        getTemp("pro");
           function getTemp(env){
        var data = {};
        var successfn = function(jdata){
            var _HTML = "";
            _env_select.html("");
            $.each(jdata,function(i,val){
                _HTML = _HTML + "<option value="+jdata[i][0]+">"+jdata[i][0]+"</option>";
            });
            _env_select.html(_HTML);
        };
        var errorfn = function(jdata){
            alert("数据返回出错");
        };
        
        $.ajax({
            type: "get",
            data: data,
            url: "/api/getdeployapp",
            dataType: "json",
            success: function(d){
                successfn(d);
            },
            error: function(e){
                errorfn(e);
            }
        });
    };

    Transaction = function(){
        this.selectedIp = function(){
            var data = {};
            data.env = _env_select.val();
            var successfn = function(jdata){
                var _HTML = "";
                _ip_select.html("");
                $.each(jdata,function(i,val){
                    _HTML = _HTML + "<option value="+jdata[i][0]+">"+jdata[i][0]+"</option>";
                });
                _ip_select.html(_HTML);
            };
            var errorfn = function(jdata){
                alert("数据返回出错");
            };
            
            $.ajax({
                type: "get",
                data: data,
                url: "/api/deployip",
                dataType: "json",
                success: function(d){
                    successfn(d);
                },
                error: function(e){
                    errorfn(e);
                }
            });
        };
        
        this.selectedUser = function(){
            var data = {};
            data.env= _env_select.val();
            data.ip = _ip_select.val();
            var successfn = function(jdata){
                var _HTML = "";
                _user_select.html("");
                $.each(jdata,function(i,val){
                    _HTML = _HTML + "<option value="+jdata[i][0]+">"+jdata[i][0]+"</option>";
                });
                _user_select.html(_HTML);
            };
            var errorfn = function(jdata){
                alert("数据返回出错");
            };
            
            $.ajax({
                type: "get",
                data: data,
                url: "/api/deployuser",
                dataType: "json",
                success: function(d){
                    successfn(d);
                },
                error: function(e){
                    errorfn(e);
                }
            });
        };
            
      };
    var transactionGet1 = new Transaction();
    transactionGet1.selectedIp();
    _env_select.on('change',function(){
        transactionGet1.selectedIp();
    })
    
    
    
    var transactionGet2 = new Transaction();
    transactionGet2.selectedUser();
    _ip_select.on('change',function(){
        transactionGet2.selectedUser();
    })
         
})

原文地址:https://www.cnblogs.com/hzcya1995/p/13349246.html