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
网友评论