目录
纯jquery方式实现，地址数据来源与苏宁接口
select2插件方式实现，地址数据来源与苏宁接口
纯jquery方式实现，地址数据来源与苏宁接口
首选需要选择省份
当为直辖市时，市不用选择会自动加载，并置灰不可改变。当街道为全区时，处于不可选状态。如下图所示
当市下面的区唯一时，选择市后，区自动加载，并置灰。如下图所示
完整代码如下 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>address</title>
<script src="./js/jquery-3.3.1.js"></script>
<style>
select {
width: 200px;
height: 30px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="container">
<div><h3>请完善地址信息</h3></div>
<div class="layui-m-layer " id="address">
<select id="provice">
<option selected="selected" value="请选择省" disabled="disabled">请选择省</option>
</select>
<select id="city">
<option selected="selected" value="请选择市" disabled="disabled">请选择市</option>
</select>
<select id="district">
<option selected="selected" value="请选择区/县" disabled="disabled">请选择区/县</option>
</select>
<select id="streets">
<option selected="selected" value="请选择街道/镇" disabled="disabled">请选择街道/镇</option>
</select>
</div>
</div>
<script>
$(function () {
//先隐藏市、区、街道
$("#city").hide();
$("#district").hide();
$("#streets").hide();
//加载省份数据
$.ajax({
type: "get",
url: "https://ipservice.suning.com/les/provinceList-callback.html",
dataType: "jsonp",
jsonpCallback: "callback",
jsonp: "callback",
success: function (data) {
//获取所有的省份信息
var proviceList = data.provinces;
//开始填充省份信息到select下面的option中
$.each(proviceList, function (i, val) {
// console.log(val);
$("#provice").append("<option value=" + val.commerceId + ">" + val.name + "</option>");
})
}
});
//监测省份值的改变，由此加载城市
$("#provice").on("change", function (e) {
$("#city").hide();
$("#district").hide();
$("#streets").hide();
var proviceSelected = $(e.target).val()
console.log($(e.target).val());
$("#city").empty();
// $("#city").empty().append("<option selected=\"selected\" value=\"请选择市\" disabled=\"disabled\">请选择市</option>");
$.ajax({
type: "get",
url: "https://ipservice.suning.com/les/cityList-" + proviceSelected + "-callback.html",
dataType: "jsonp",
jsonpCallback: "callback",
jsonp: "callback",
success: function (data) {
//获取所有的省份信息
var cityList = data.cities;
$("#city").attr("disabled", false);
//开始填充省份信息到select下面的option中
$.each(cityList, function (i, val) {
// console.log(val);
$("#city").append("<option value=" + val.lesId + ">" + val.name + "</option>");
});
//判断城市是否只有一个值为直辖市
if (cityList.length > 1) {
//多个值，添加选择头option
$("#city").prepend("<option selected=\"selected\" value=\"请选择市\" disabled=\"disabled\">请选择市</option>");
} else {
//一个值，直接显示，并且使其不可用置灰
$("#city").attr("disabled", true);
$("#city").trigger("change");
}
$("#city").show();
}
});
});
//监测市值的改变，由此加载县区
$("#city").on("change", function (e) {
$("#district").hide();
$("#streets").hide();
var citySelected = $(e.target).val()
console.log($(e.target).val());
$("#district").empty();
// $("#city").empty().append("<option selected=\"selected\" value=\"请选择市\" disabled=\"disabled\">请选择市</option>");
$.ajax({
type: "get",
url: "https://ipservice.suning.com/les/districtList-" + citySelected + "-callback.html",
dataType: "jsonp",
jsonpCallback: "callback",
jsonp: "callback",
success: function (data) {
//获取所有的省份信息
var districtList = data.districts;
$("#district").attr("disabled", false);
//开始填充省份信息到select下面的option中
$.each(districtList, function (i, val) {
// console.log(val);
$("#district").append("<option value=" + val.cityLesId + ">" + val.name + "</option>");
});
if (districtList.length > 1) {
$("#district").prepend("<option selected=\"selected\" value=\"请选择县区\" disabled=\"disabled\">请选择县/区</option>");
} else {
$("#district").attr("disabled", true);
$("#district").trigger("change");
}
$("#district").show();
}
});
});
//监测区值的改变，由此加载街道/镇
$("#district").on("change", function (e) {
$("#streets").hide();
var streetSelected = $(e.target).val();
console.log($(e.target).val());
$("#streets").empty();
if (streetSelected != null && streetSelected.trim().length > 0) {
var streePrev = streetSelected.substring(0, 3);
var streeLast = streetSelected.substring(3);
// $("#city").empty().append("<option selected=\"selected\" value=\"请选择市\" disabled=\"disabled\">请选择市</option>");
$.ajax({
type: "get",
url: "https://ipservice.suning.com/les/streetList-" + streePrev + "-" + streeLast + "-callback.html",
dataType: "jsonp",
jsonpCallback: "callback",
jsonp: "callback",
success: function (data) {
//获取所有的省份信息
var streetList = data.streets;
$("#streets").attr("disabled", false);
//开始填充省份信息到select下面的option中
$.each(streetList, function (i, val) {
// console.log(val);
$("#streets").append("<option value=" + val.districtLesId + ">" + val.name + "</option>");
});
if (streetList.length > 1) {
$("#streets").prepend("<option selected=\"selected\" value=\"请选择街道/镇\" disabled=\"disabled\">请选择街道/镇</option>");
} else {
$("#streets").attr("disabled", true);
}
$("#streets").show();
}
});
}
});
})
</script>
</body>
</html>select2插件方式实现，地址数据来源与苏宁接口
select2插件带有搜索功能
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>address</title>
<link rel="stylesheet" href="./css/select2.min.css">
<script src="./js/jquery-3.3.1.js"></script>
<script src="./js/select2/js/select2.full.js"></script>
<script src="./js/select2/js/i18n/zh-CN.js"></script>
</head>
<body>
<div class="container">
<div><h3>请填写地址信息：</h3></div>
<div id="addrDiv">
<select id="provices">
<option></option>
</select>
<select id="citys">
<option></option>
</select>
<select id="districts">
<option></option>
</select>
<select id="streets">
<option></option>
</select>
</div>
</div>
<script>
$(function () {
$("#citys").hide();
$("#districts").hide();
$("#streets").hide();
//首先加载所有省份
$.ajax({
type: "get",
url: "https://ipservice.suning.com/les/provinceList-callback.html",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "callback",
success: function (data) {
console.log(data);
var proviceList = data.provinces;
var proviceListSelect2 = [];
for (var key in proviceList) {
//将数据重新封装成select2需要的格式
proviceListSelect2.push({id: proviceList[key].commerceId, text: proviceList[key].name});
}
$("#provices").select2({
placeholder: "请选择省",
language: "zh-CN",
width: 200,
data: proviceListSelect2
})
}
});
//省份值改变后，加载citys
$("#provices").change(function () {
//清空市区街道
$("#citys").empty();
$("#districts").empty();
$("#streets").empty();
//隐藏市区街道
$("#citys+span").hide();
$("#districts+span").hide();
$("#streets+span").hide();
//获取改变的值
var proviceSet = $("#provices option:selected").val();
console.log("选中的省的id：" + proviceSet);
$.ajax({
type: "get",
url: "https://ipservice.suning.com/les/cityList-" + proviceSet + "-callback.html",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "callback",
success: function (data) {
console.log(data);
var cityList = data.cities;
var cityListSelect2 = []
for (var key in cityList) {
//将数据重新封装成select2需要的格式
cityListSelect2.push({id: cityList[key].lesId, text: cityList[key].name});
}
$('#citys').attr("disabled", false);
if (cityListSelect2.length == 1) {
$('#citys').attr("disabled", true);
$("#citys").trigger("change", {data: cityListSelect2[0].id});
} else {
$("#citys").prepend("<option></option>");
}
$("#citys").select2({
placeholder: "请选择市",
language: "zh-CN",
width: 200,
data: cityListSelect2
});
}
});
})
//城市改变，加载区
$("#citys").change(function (e, data) {
//隐藏区、街道
$("#districts+span").hide();
$("#streets+span").hide();
//获取改变的值两种方式
var citysSelected;
if (data == undefined) {
citysSelected = $("#citys option:selected").val();
} else {
citysSelected = data.data;
}
console.log("选中的市的id：" + citysSelected);
$.ajax({
type: "get",
url: "https://ipservice.suning.com/les/districtList-" + citysSelected + "-callback.html",
dataType: "jsonp",
contentType: "text/javascript;charset=UTF-8",
jsonp: "callback1",
jsonpCallback: "callback",
success: function (data) {
console.log(data);
var districtList = data.districts;
var districtsListSelect2 = []
for (var key in districtList) {
//将数据重新封装成select2需要的格式
districtsListSelect2.push({
id: districtList[key].cityLesId
, text: districtList[key].name
});
}
$("#districts").empty();
$('#districts').attr("disabled", false);
if (districtsListSelect2.length == 1) {
$('#districts').attr("disabled", true);
$("#districts").trigger("change", {data: districtsListSelect2[0].id});
} else {
$("#districts").prepend("<option></option>");
}
$("#districts").select2({
placeholder: "请选择县/区",
language: "zh-CN",
width: 200,
data: districtsListSelect2
})
}
});
})
//区改变，加载街道
$("#districts").change(function (e, data) {
$("#streets+span").hide();
//获取改变的值
var streetsSelected;
console.log("传参data:" + data);
if (data == undefined || data == null) {
streetsSelected = $("#districts option:selected").val();
} else {
streetsSelected = data.data;
}
console.log("选中的区的id：" + streetsSelected);
//剪切参数
var streeSelect2Prev = streetsSelected.substring(0, 3);
var streeSelect2Last = streetsSelected.substring(3);
$.ajax({
type: "get",
url: "https://ipservice.suning.com/les/streetList-" + streeSelect2Prev + "-" + streeSelect2Last + "-callback.html",
dataType: "jsonp",
contentType: "text/javascript;charset=UTF-8",
jsonp: "callback2",
jsonpCallback: "callback",
success: function (data) {
console.log(data);
var streetList = data.streets;
var streetListSelect2 = []
for (var key in streetList) {
//将数据重新封装成select2需要的格式
streetListSelect2.push({
id: streetList[key].districtLesId
, text: streetList[key].name
});
}
$("#streets").empty();
$('#streets').attr("disabled", false);
if (streetListSelect2.length == 1) {
$('#streets').attr("disabled", true);
} else {
$("#streets").prepend("<option></option>")
}
$("#streets").select2({
placeholder: "请选择街道",
language: "zh-CN",
width: 200,
data: streetListSelect2
});
}
});
})
})
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
