省市区三级联动在javaweb项目中的应用

最新推荐文章于 2022-02-05 22:27:04 发布

DAdsh#e13mcdf

最新推荐文章于 2022-02-05 22:27:04 发布

阅读量422

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_46246785/article/details/108855327

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

本文介绍了如何在layui框架中使用一个省市区三级联动插件，并将其应用于寄货和收货地址的输入。在实际项目中遇到的问题包括：邮编转换为省市区名称的调用错误和两个地址调用同一方法导致的冲突。通过确保参数一致性及创建新方法避免冲突，成功解决了这两个问题。示例代码展示了html和js的修改细节，有助于理解实现过程。

摘要由CSDN通过智能技术生成

基于layui的省市区三级联动插件

链接: https://pan.baidu.com/s/12Pbf9tz2HYzW0KnlUsVotw 提取码: 5usu

在项目中需要做一些修改：将这个三级联动加入到一个增加的表单中，作为寄货地址和发货地址。

html:修改每一个name，和数据库中的地址名一致即可

<label class="layui-form-label">寄件地址</label>
			<!-- 寄件省市区 -->
			<div class="layui-row">
						<div class="layui-col-md4">
							<div class="layui-inline layui-select-default" style="width: 50%;">
								<select name="experssSendAddressProvince" data-area="" lay-filter="experssSendAddressProvince">
									<option value="">寄件省</option>
								</select> 
							</div>
						</div>
						<div class="layui-col-md4">
							<div class="layui-inline layui-select-default" style="width: 50%;">
								<select name="experssSendAddressCity" data-area="" lay-filter="experssSendAddressCity">
									<option value="">寄件市</option>
								</select> 
							</div>
						</div>
						<div class="layui-col-md4">
							<div class="layui-inline layui-select-default" style="width: 50%;">
								<select name="experssSendAddressStation" data-area="" lay-filter="experssSendAddressStation">
									<option value="">寄件区</option>
								</select> 
							</div>
						</div>
				</div>
				<!--  收件省市区 -->
			<label class="layui-form-label">收件地址</label>
			<div class="layui-row">
						<div class="layui-col-md4">
							<div class="layui-inline layui-select-default" style="width: 50%;">
								<select name="experssHarvesAddressProvince" data-area="" lay-filter="experssHarvesAddressProvince">
									<option value="">收件省</option>
								</select> 
							</div>
						</div>
						<div class="layui-col-md4">
							<div class="layui-inline layui-select-default" style="width: 50%;">
								<select name="experssHarvesAddressCity" data-area="" lay-filter="experssHarvesAddressCity">
									<option value="">收件市</option>
								</select> 
							</div>
						</div>
						<div class="layui-col-md4">
							<div class="layui-inline layui-select-default" style="width: 50%;">
								<select name="experssHarvesAddressStation" data-area="" lay-filter="experssHarvesAddressStation">
									<option value="">收件区</option>
								</select> 
							</div>
						</div>
			</div>

js:需要调用common.js中封装好的方法：

bug1：在获取了省市区的邮编后，调用getcity（）和getcity2()方法，将邮编转为省市区的中文名时，注意实参与方法里接收的数据类型要一致，Object object。否则没办法调用getCity();

解决1：以下三处的省市区的命名要一致即可

1.//获取发货邮编
				var province = resData.experssSendAddressProvince;
				var city = resData.experssSendAddressCity;
				var district = resData.experssSendAddressStation;

2.//寄货方法getCity()
var address = common.getCity({province,city,district});

3.
getCity: function(address) {
			//AreaData是地址传过来的json对象
			//注意：address传来的是键值对格式的数据，要和这边的格式
			//console.info(address);
			//console.info(address.province);
			var AreaData = $.rawCitiesData;
			if("undefined" == typeof AreaData) {
				layer.open({
					title: '系统提示'
					,content: '调用getCity之前请引入地址数据'
				}); 
				return;
			}
			var province = address.province,
				city = address.city,
				district = address.district,
				provinceName = '',
				cityName = '',
				districtName = '';

bug2:若一个寄件地址，一个收货地址，二者调用一个方法getCity()会冲突，因为只需要调用两方法，所以创建一个一致的方法getCity2(),注意，方法名后有逗号！（否则会报奇怪的错）

真是有趣啊。