jquery实现多级联动

短命女 2022-06-14 10:58 224阅读 0赞

我们在开发中，经常会遇到控件选择联动的情况，最常见的莫过于省市县了，当然还有其它不同层级的联动。好了，下面开始进行多久联动了。

详细代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    
    <!DOCTYPE HTML">
    <html>
      <head>
        <base href="<%=basePath%>">
        <title>三级联动</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="select,三级,联动">
    	<meta http-equiv="description" content="这是一个三级联动">
    	<title>selectList</title>
    	<style type="text/css">
    	    .selectList{width:500px;margin:50px auto;}
    	</style>
    <script type="text/javascript" src="static/js/jquery-1.9.1.min.js"></script>
    </head>
    <body>
        <div class="selectList">
            <select class="province">
                <option>请选择</option>
            </select>
            <select class="city">
                <option>请选择</option>
            </select>
            <select class="district">
                <option>请选择</option>
            </select>
        </div>
        <script type="text/javascript">
        $(function(){
            $(".selectList").each(function(){
                var url = "static/json/area.json";
                var areaJson;
                var temp_html;
                var oProvince = $(this).find(".province");
                var oCity = $(this).find(".city");
                var oDistrict = $(this).find(".district");
                //初始化省
                var province = function(){
                    $.each(areaJson,function(i,province){
                        temp_html+="<option value='"+province.p+"'>"+province.p+"</option>";
                    });
                    oProvince.html(temp_html);
                    city();
                };
                //赋值市
                var city = function(){
                    temp_html = ""; 
                    var n = oProvince.get(0).selectedIndex;
                    $.each(areaJson[n].c,function(i,city){
                        temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>";
                    });
                    oCity.html(temp_html);
                    district();
                };
                //赋值县
                var district = function(){
                    temp_html = ""; 
                    var m = oProvince.get(0).selectedIndex;
                    var n = oCity.get(0).selectedIndex;
                    if(typeof(areaJson[m].c[n].d) == "undefined"){
                        oDistrict.css("display","none");
                    }else{
                        oDistrict.css("display","inline");
                        $.each(areaJson[m].c[n].d,function(i,district){
                            temp_html+="<option value='"+district.dt+"'>"+district.dt+"</option>";
                        });
                        oDistrict.html(temp_html);
                    };
                };
                //选择省改变市
                oProvince.change(function(){
                    city();
                });
                //选择市改变县
                oCity.change(function(){
                    district();
                });
                //获取json数据
                $.getJSON(url,function(data){
                    areaJson = data;
                    province();
                });
            });
        });
        </script>
    </body>
    </html>

引用json数据如下:

[
        {"p":"ALL",
         "c":[
            {"ct":"ALL",
            "d":[
                {"dt":"ALL"}
            ]}        
        ]},
        {"p":"江西省",
         "c":[{"ct":"ALL",
            "d":[
                {"dt":"ALL"}
            ]},
            {"ct":"南昌市",
            "d":[
                {"dt":"ALL"},
                {"dt":"西湖区"},
                {"dt":"东湖区"},
                {"dt":"高新区"}
            ]},
            {"ct":"赣州市",
            "d":[
                {"dt":"ALL"},
                {"dt":"瑞金县"},
                {"dt":"南丰县"},
                {"dt":"全南县"}
            ]}
        ]},
        {"p":"北京",
         "c":[
             {"ct":"ALL"},
             {"ct":"东城区"},
             {"ct":"西城区"}
        ]},
        {"p":"河北省",
        "c":[{"ct":"ALL",
            "d":[
                {"dt":"ALL"}
            ]},
            {"ct":"石家庄",
            "d":[
                {"dt":"ALL"},
                {"dt":"长安区"},
                {"dt":"桥东区"},
                {"dt":"桥西区"}
            ]},
            {"ct":"唐山市",
            "d":[
                {"dt":"ALL"},
                {"dt":"滦南县"},
                {"dt":"乐亭县"},
                {"dt":"迁西县"}
            ]}
        ]}
    ]

当然实际开发中你会从数据库或其他文件中读取源数据，这样你只需要把读取的数据拼写成这种格式的json数据，就Ok了。