简单jquery实现select三级联动

简单的jquery实现select三级联动

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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":"迁西县"}
]}
]}
]

简单jquery实现select三级联动

提示

提示