区域三级联动

1.需要导入两个js，一个是distpicker.data.js，另一个是distpicker.js
2.可以自己新建一个js，放入下面代码，.distpicker()是初始化，可以修改.distpicker()里面的属性（注意声明要在第三点的js后面）：

$(function () {
    'use strict';
    var $distpicker = $('#distpicker');
    $distpicker.distpicker({
        province: '福建省',
        city: '厦门市',
        district: '思明区'
    });
    $('#reset').click(function () {
        $distpicker.distpicker('reset');
    });
    $('#reset-deep').click(function () {
        $distpicker.distpicker('reset', true);
    });
    $('#destroy').click(function () {
        $distpicker.distpicker('destroy');
    });
    $('#distpicker1').distpicker();
    $('#distpicker2').distpicker({
        province: '---- 所在省 ----',
        city: '---- 所在市 ----',
        district: '---- 所在区 ----'
    });
    $('#distpicker3').distpicker({
        autoSelect: false
    });
    $('.province').distpicker({
        autoSelect: false
    });
});

3.1.可以先在三级区域前面加一个隐藏的Input框存放区域代码，用来与后台交互：

<input id="area" type="text" name="resume.area" value="000000" style="position:absolute;top:-999px"/>
<div id="setArea" class="province">
       <div class="form-group">
               <label class="sr-only">Province</label>
               <select class="form-control area" onchange="getAreaCode(this,1)"></select>
        </div>
        <div class="form-group">
                <label class="sr-only">City</label>
                <select class="form-control area" onchange="getAreaCode(this,2)"></select>
         </div>
         <div class="form-group">
                 <label class="sr-only">District</label>
                 <select class="form-control area" onchange="getAreaCode(this,3)"></select>
          </div>
          <div class="clearfix"></div>
</div>

3.2.获取用户选择的区域代码：

/*获取区域代码*/
    function getAreaCode(c, count) {
        var code = $(c).parents(".province").children().eq(count - 1).children("select").val();
        if (count == 1 && code == "") {
            code = "000000";
        } else if (count == 2 && code == "") {
            code = $(c).parents(".province").children().eq(count - 2).children("select").val();
        } else if (count == 3 && code == "") {
            code = $(c).parents(".province").children().eq(count - 2).children("select").val();
        }
        $(c).parents(".province").prev().attr("value", code);
    }

3.3.1.若后台有传默认的区域代码给前端，前端可以使用下面代码初始化：

$("#experience .content-box:eq(" + count + ") .province").distpicker({
      province: e1,
      city: e2,
      district: e3,
      autoSelect: false
});

3.3.2.这是详细的前端获取后台传的区域代码后显示的代码：

var expectarea = "${resumeDTO.resume.expectarea}";
if (expectarea == "") {
    $("#setExpectarea").distpicker({
         autoSelect: false
     });
} else {
     var expectarea1 = "${resumeDTO.resume.expectarea}".substring(0, 2) + "0000";
     var expectarea2 = "${resumeDTO.resume.expectarea}".substring(0, 4) + "00";
     var expectarea3 = "${resumeDTO.resume.expectarea}";
     var e1 = JSON.stringify(ChineseDistricts[86][expectarea1]);
     var e2 = JSON.stringify(ChineseDistricts[expectarea1][expectarea2]);
     var e3 = JSON.stringify(ChineseDistricts[expectarea2][expectarea3]);
     if (e1 == undefined || e1 == '') {
          e1 = "—— 省 ——";
     } else {
          e1 = e1.substring(1, e1.length - 1);
     }
     if (e2 == undefined || e2 == '') {
          e2 = "—— 市 ——";
     } else {
          e2 = e2.substring(1, e2.length - 1);
     }
     if (e3 == undefined || e3 == '') {
          e3 = "—— 区 ——";
     } else {
          e3 = e3.substring(1, e3.length - 1);
     }
     $("#setExpectarea").distpicker({
          province: e1,
          city: e2,
          district: e3,
          autoSelect: false
     });
}

网盘：https://pan.baidu.com/s/1c2jGNZy
提取码：9gwa