简单易懂的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":"迁西县"}
        ]}
    ]}
]

各位最好自己封装成插件，方便调用

转载请注明本文地址：简单易懂的jquery版三级联动select

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

猜你喜欢