欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

简单易懂的jquery版三级联动select

简单易懂的jquery版三级联动select

html和js部分

复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset=gbk />
<title>selectList</title>
<style type="text/css">
    *{margin:0;padding:0;}
    .selectList{width:200px;margin:50px auto;}
</style>
<script type="text/javascript" src="jquery1.7.1.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>
    <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 = "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文件(area.json),这里只是事例,根据情况添加或编写

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

各位最好自己封装成插件,方便调用
来自 http://www.cnblogs.com/afuge/archive/2013/06/08/3127172.html


普通分类: