jQuery简单的省市区县三级联动案例

简单的省市区三级联动，适合初学者入门学习的案例

目录结构如下： 三级联动.html 跟 JS文件夹是同个级别

效果图如下：

HTML代码：

<style type="text/css">
    *{margin:0;padding:0;}
    .selectAll
      { width:400px;
         margin:100px auto;
      }
</style>

<div class="selectAll">
    <!--省份-->
    <select class="province">
        <option>请选择</option>
    </select>
    <!--城市-->
    <select class="city">
        <option>请选择</option>
    </select>
    <!--地区-->
    <select class="district">
        <option>请选择</option>
    </select>
</div>

JS代码：

<script src='./js/jquery.min.js'></script>
<script type="text/javascript">
$(function(){
//    JSON文件放的位置，根据你放的位置更改
    var url = './js/district.json';
//    JSON数据为数组，将返回的值赋值给areaData，一次性请求完成
    var areaData = null;
//    获取到的数据用模板存放到templateOption，进行DOM重绘
    var templateOption = "";
//
    var province = $('.province');
    var city = $('.city');
    var district = $('.district');
//    获取JSON格式
    $.getJSON(url,function (data) {
        areaData = data;
        provinceFun();
    })
//    省份
    var provinceFun = function(){
        $.each(areaData,function(index,value){
            templateOption += "<option value='"+value.p+"'>"+value.p+"</option>";
        })
        province.html(templateOption);
        cityFun();
    };
//    城市
    var cityFun = function(){
        templateOption = "";
//        获取省份选取的索引，用get(0)是因为获取$('.province')的第一个，即使$('.province')只有一个。下面也一样。
        var p = province.get(0).selectedIndex;
//        根据JSON格式，获取选取省份对应的市的数组
        $.each(areaData[p].c,function(index,value){
            templateOption += "<option value='"+value.ct+"'>"+value.ct+"</option>";
        })
//        对城市的option选项进行重绘
        city.html(templateOption);
//        城市选择好了，触发区县
        districtFun();
    };
//    区县
    var districtFun = function(){
        templateOption = "";
        var p = province.get(0).selectedIndex;
        var c = city.get(0).selectedIndex;
//        若区县没有，不显示出来
        if(areaData[p].c[c].d == undefined){
            district.css('display','none');
        }else{
            district.css('display','inline');
            $.each(areaData[p].c[c].d,function(index,value){
                templateOption += "<option value='"+value.dt+"'>"+value.dt+"</option>";
            })
            district.html(templateOption);
        }

    };
//    点击省份，触动市的变化
    province.change(function(){
        cityFun();
    });
//    点击市，触动地区的变化
    city.change(function(){
        districtFun();
    })
})
</script>