三级联动的js代码
简介
不适用其他插件，用jquery调用后台接口，实现行政区划的三级联动功能
html
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-12 control-label">注册地址</label>
<div class="col-lg-2 col-md-2">
<select id="reProvinceDicId" class="form-control">
</select>
</div>
<div class="col-lg-2 col-md-2">
<select id="reCityDicId" class="form-control">
</select>
</div>
<div class="col-lg-2 col-md-2">
<select id="reCountyDicId" class="form-control">
</select>
</div>
</div>
引入js
<script src="../assets/js/bootstrap/bootstrap-select.min.js"></script>
<script src="../assets/js/areaUtils.js"></script>
<script src="../assets/js/selectUtils.js"></script>
areaUtils.js
/**
* 三级联动,公共js类
*/
//init
var AREAUTILS = function () {};
//initArea
AREAUTILS.prototype.initArea=function (str1,str2,str3){
var _this=this;
_this.ProvinceBind(str1, str2, str3);
$("#"+str1).change( function () {
_this.ProvinceOnChange(str1, str2, str3);
});
$("#"+str1).change( function () {
_this.CityBind(str1,str2);
});
$("#"+str2).change(function () {
_this.CountyBind(str2,str3);
});
};
//省的onchange事件
AREAUTILS.prototype.ProvinceOnChange =function (str1, str2, str3) {
var provice = $("#"+str1).attr("value");
//判断省份这个下拉框选中的值是否为空
if (provice == 0) {
$("#"+str2).html("");
new SELECTUTILS().addDefaultOptionSelected(str2);
$("#"+str3).html("");
new SELECTUTILS().addDefaultOptionSelected(str3);
return;
}
};
//省的方法
AREAUTILS.prototype.ProvinceBind=function (str1, str2, str3) {
var _this=this;
//清空下拉数据
$("#"+str1).html("");
$.get("/district", { parentId: 0, level:1}, function(districtData) {
new SELECTUTILS().addAllOption(str1, districtData);
}, "json");
new SELECTUTILS().addDefaultOptionSelected(str2);
new SELECTUTILS().addDefaultOptionSelected(str3);
};
//市的方法
AREAUTILS.prototype.CityBind=function (str1,str2){
var _this=this;
var provice = $("#"+str1).attr("value");
//判断省份这个下拉框选中的值是否为空
if (provice == "") {
return;
}
$("#"+str2).html("");
$.get("/district", { parentId: provice, level:2}, function(districtData) {
new SELECTUTILS().addAllOption(str2, districtData);
}, "json");
};
//县的方法
AREAUTILS.prototype.CountyBind=function (str2,str3) {
var _this=this;
var city = $("#"+str2).attr("value");
//判断市这个下拉框选中的值是否为空
if (city == "") {
return;
}
$("#"+str3).html("");
$.get("/district", { parentId: city, level:3}, function(districtData) {
new SELECTUTILS().addAllOption(str3, districtData);
}, "json");
};
//回显方法
AREAUTILS.prototype.ShowCallBack =function (str1, str2, str3, s1value, s2value, s3value){
var _this=this;
_this.ProvinceBindSelected(str1,s1value);
_this.CityBindSelected(s1value,str2,s2value);
_this.CountyBindSelected(s2value,str3,s3value);
_this.BindOnChange(str1, str2, str3);
};
//绑定三级联动的onchange
AREAUTILS.prototype.BindOnChange =function (str1, str2, str3){
var _this=this;
$("#"+str1).change( function () {
_this.CityBind(str1,str2);
});
$("#"+str2).change(function () {
_this.CountyBind(str2,str3);
});
}
//省已经勾选，进行回显
AREAUTILS.prototype.ProvinceBindSelected=function (str1,selected) {
//清空下拉数据
$("#"+str1).html("");
$.get("/district", { parentId: 0, level:1}, function(areaData) {
new SELECTUTILS().addAllOptionSelected(str1, areaData, '', '', selected);
}, "json");
};
//市已经勾选，进行回显
AREAUTILS.prototype.CityBindSelected=function (str1Value,str2,selected){
var provice = str1Value;
//判断省份这个下拉框选中的值是否为空
if (provice == "") {
return;
}
$("#"+str2).html("");
$.get("/district", { parentId: provice, level:2}, function(areaData) {
new SELECTUTILS().addAllOptionSelected(str2, areaData, '', '', selected);
}, "json");
};
//县已经勾选，进行回显
AREAUTILS.prototype.CountyBindSelected=function (str2Value,str3,selected) {
var city = str2Value;
//判断市这个下拉框选中的值是否为空
if (city == "") {
return;
}
$("#"+str3).html("");
$.get("/district", { parentId: city, level:3}, function(areaData) {
new SELECTUTILS().addAllOptionSelected(str3, areaData, '', '', selected);
}, "json");
};
selectUtils.js
/**
* 下拉框js,公共js类
*/
//init
var SELECTUTILS = function () {};
/**
* 添加下拉框信息
* @domId String 下拉框ID
* @dictData {} 数据
* @idField id字段
* @nameField name字段
*/
SELECTUTILS.prototype.addOption =function (domId, dictData, idField, nameField){
var option = "";
//id
var finalIdField="";
if(idField==null || idField==""){
finalIdField="id";
}else{
finalIdField=idField;
}
//name
var finalNameField="";
if(nameField==null || nameField==""){
finalNameField="name";
}else{
finalNameField=nameField;
}
//for
for (var i = 0; i < dictData.length; i++) {
option += "<option value=" + dictData[i][finalIdField] + ">" + dictData[i][finalNameField] + "</option>";
}
$("#"+domId).find("option").remove();
$("#" + domId).append(option).selectpicker('refresh');
};
/**
* 添加下拉框信息(有'请选择')
* @domId String 下拉框ID
* @dictData {} 数据
* @idField id字段
* @nameField name字段
*/
SELECTUTILS.prototype.addAllOption =function (domId, dictData, idField, nameField){
var option = "";
//id
var finalIdField="";
if(idField==null || idField==""){
finalIdField="id";
}else{
finalIdField=idField;
}
//name
var finalNameField="";
if(nameField==null || nameField==""){
finalNameField="name";
}else{
finalNameField=nameField;
}
option += "<option value='0'>---请选择---</option>";
for (var i = 0; i < dictData.length; i++) {
option += "<option value=" + dictData[i][finalIdField] + ">" + dictData[i][finalNameField] + "</option>";
}
$("#"+domId).find("option").remove();
$("#" + domId).append(option).selectpicker('refresh');
};
/**
* 添加下拉框信息(有'请选择'),回显使用
* @domId String 下拉框ID
* @dictData {} 数据
* @idField id字段
* @nameField name字段
* @selectId 回显id字段
*/
SELECTUTILS.prototype.addAllOptionSelected =function (domId, dictData, idField, nameField ,selectId){
var option = "";
//id
var finalIdField="";
if(idField==null || idField==""){
finalIdField="id";
}else{
finalIdField=idField;
}
//name
var finalNameField="";
if(nameField==null || nameField==""){
finalNameField="name";
}else{
finalNameField=nameField;
}
option += "<option value='0'>---请选择---</option>";
for (var i = 0; i < dictData.length; i++) {
if(selectId==dictData[i][finalIdField]){
option += "<option value=" + dictData[i][finalIdField] + " selected='selected' >" + dictData[i][finalNameField] + "</option>";
}else{
option += "<option value=" + dictData[i][finalIdField] + ">" + dictData[i][finalNameField] + "</option>";
}
}
$("#"+domId).find("option").remove();
$("#" + domId).append(option).selectpicker('refresh');
};
//默认情况
SELECTUTILS.prototype.addDefaultOptionSelected =function (domId){
var option = "";
option += "<option value='0'>---请选择---</option>";
$("#"+domId).find("option").remove();
$("#" + domId).append(option).selectpicker('refresh');
};
/**
* 验证下拉框为一个有效的选择
* @domId String 下拉框ID
* @return boolean
*/
SELECTUTILS.prototype.checkIsSelected =function (domId){
var flag=true;
var selectValue = $("#"+domId+" option:selected").val();
//为'undefined'
if(typeof(selectValue)=='undefined'){
flag=false;
}
//''
if(selectValue==''){
flag=false;
}
//null
if(selectValue==null){
flag=false;
}
//为非数字
var intRe = /^\d+(?=\.{0,1}\d+$|$)/;
if (!intRe.test(selectValue) && flag==true) {
flag=false;
}
return flag;
};
调用（创建与回显）
//创建
new AREAUTILS().initArea("reProvinceDicId","reCityDicId","reCountyDicId");
//回显（修改时回显；省份 城市 县镇 对应的domId，以及对应的选中id）
new AREAUTILS().ShowCallBack("reProvinceDicId", "reCityDicId", "reCountyDicId",data.reProvinceDicId,data.reCityDicId,data.reCountyDicId);
