基於layui的省市區三級聯動（資料互動）

劍未佩妥發表於2018-09-18
UI

專案中用到了省市區三級聯動的一個效果

於是藉助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');
					}
				}
			})
		}
	})
}複製程式碼

總的來說比較簡單的，理解他的邏輯其實非常簡單，封裝好了拿去用。


相關文章