基于layui的省市区三级联动（数据交互）

项目中用到了省市区三级联动的一个效果

于是借助layui的下拉框和回调，用ajax请求完成动态的省市区三级联动

话不多说上代码

html代码：

<div class="labcon layui-form farm_selet">
		<div class="province">
			<select name="province" lay-filter="province">
				<option value="">省份</option>
			</select> 
		</div>
		<div class="city">
			<select name="city" lay-filter="city">
				<option value="">城市</option>
			</select> 
		</div>
		<div class="area">
			<select name="area" lay-filter="area">
				<option value="">区/县</option>
			</select>
		</div>
		<div class="area_text">请选择农场所在地的省份</div>
					</div>复制代码

js代码如下：

//省市区三级联动
function provincialLevel(){
	/*省份菜单*/
getPost(urlListByParentId,{"parentId":0},localStorage.getItem("ACCESSTOKEN"),function(res){
	if(res.respCode == 0){
		if(res.obj.list.length>0){
			var str="";
			res.obj.list.forEach(function(ele,index){
				str='<option value="'+ele.id+'">'+ele.areaName+'</option>';
				$('.company_info .province select').append(str);
			})
			form.render('select');
		}
		
	}
})
/*城市菜单*/
form.on('select(province)',function(data){
	$('.company_info .city select').empty();//选择省的时候清空城市地区的值
	$('.company_info .city select').html('<option value="">城市</option>');
	$('.company_info .area select').empty();
	$('.company_info .area select').html('<option value="">区/县</option>');
	if(data.value){
		var ajaxJson = {
			  	"parentId":data.value
			}
		getPost(urlListByParentId,ajaxJson,localStorage.getItem("ACCESSTOKEN"),function(res){
			if(res.respCode == 0){
				if(res.obj.list.length>0){
					var str="";
					res.obj.list.forEach(function(ele,index){
						str='<option value="'+ele.id+'">'+ele.areaName+'</option>';
						$('.company_info .city select').append(str);
					})
					form.render('select');
				}
			}
		})
	}
})
/*区县菜单*/
form.on('select(city)',function(data){
	$('.company_info .area select').empty();//选择市的时候清空区的值
	$('.company_info .area select').html('<option value="">区/县</option>');
	if(data.value){
		var ajaxJson = {
			  	"parentId":data.value
			}
		getPost(urlListByParentId,ajaxJson,localStorage.getItem("ACCESSTOKEN"),function(res){
			if(res.respCode == 0){
				if(res.obj.list.length>0){
					var str="";
					res.obj.list.forEach(function(ele,index){
						str='<option value="'+ele.id+'">'+ele.areaName+'</option>';
						$('.company_info .area select').append(str);
					})
					form.render('select');
					}
				}
			})
		}
	})
}复制代码

总的来说比较简单的，理解他的逻辑其实非常简单，封装好了拿去用。

转载于:https://juejin.im/post/5ba0be745188255c6815765a