layui ajax 省市区 三级联动

默认省有值

省

/**
	 * 省市区三级联动
	 * @param province_select 省
	 * @param city_select 市
	 * @param area_select 地区
	 */
	form.on("select(province_select)",function(data){
		var _thisObj = data.elem;
		var cityId = $(_thisObj).attr("data-city");   //获取市的id
		var areaId = $(_thisObj).attr("data-area");   //获取地区的id
		if(cityId == "" || cityId == undefined){
			return false;
		}
		$.ajax({
			type : 'POST',
			url :url,
			data : {
				provinceid : data.value
			},
			dataType : 'json',
			success : function(data) {
				$("#" +cityId).html("");
				$.each(data.data, function(key, val) {
					var option = $("<option>").val(val.cityid).text(val.city);
					$("#" +cityId).append(option);
					form.render('select');
				});
				$("#"+cityId).get(0).selectedIndex = 0;
				var cityVal = $("#" +cityId).val();   //获取市的 val 值
				if(cityVal == null || cityVal == "" || cityVal == undefined){
					form.render('select');
					return false;
				}else{
					selectArea(areaId, cityVal);
				}
			}
		});
	})

市

form.on("select(city_select)",function(data){
		var _thisObj = data.elem;
		var areaId = $(_thisObj).attr("data-area");   //获取地区的id
		$.ajax({
			type : 'POST',
			url :url',
			data : {
				cityid : data.value
			},
			dataType : 'json',
			success : function(data) {
				$("#" +areaId).html("");
				$.each(data.data, function(key, val) {
					var option = $("<option>").val(val.areaid).text(val.area);
					$("#" +areaId).append(option);
					form.render('select');
				});
				$("#" +areaId).get(0).selectedIndex = 0;
			}
		});
	})

地区

/**
 * 三级联动地区
 * @param areaId  地区id 
 * @param cityVal 市的 val 值
 */
function selectArea(areaId, cityVal){
	$("#" +areaId).html("");
	layui.use(["form"], function () {
		 var form = layui.form;
		$.ajax({
			type : 'POST',
			url : url,
			data : {
				cityid : cityVal
			},
			dataType : 'json',
			success : function(data) {
				$.each(data.data, function(key, val) {
					var option = $("<option>").val(val.areaid).text(val.area);
					$("#" +areaId).append(option);
					form.render('select');
				});
				$("#" +areaId).get(0).selectedIndex = 0;
			}
		});
	})
}

实现效果