layui省市区三级联动

实现原理:通过省区的id进行调用市区的下拉列表,在通过市区的id调用县区的下拉列表进行显示,牵一发而动全身,如果是赋值的话,就采用form,val()最后赋值

//通过三级联动进行调用这是html代码
<div class="layui-form-item">
					<label class="layui-form-label required">地区选择</label>
					<div class="layui-input-inline" style="width: 100px;">
						<select name="province" lay-verify="required" lay-filter="province">
						</select>
					</div>
					<div class="layui-input-inline" style="width: 100px;">
						<select name="city" lay-verify="required" lay-filter="city">

						</select>
					</div>
					<div class="layui-input-inline" lay-filter="area" style="width: 100px;">
						<select name="area" lay-verify="required">

						</select>
					</div>
				</div>

//这是js代码 
	// 获取省
				$.get("http://47.92.92.156:336/api/area/area",
					function(data, status) {
						console.log('data', data);
						// 动态渲染下来框
						let seleData = data.code;
						for (var i = 0; i < seleData.length; i++) {
							console.log('进入');
							let option = document.createElement("option");
							option.setAttribute("value", seleData[i].id);
							option.innerText = seleData[i].name;
							$('select[name=province]').append(option);
						};
						//渲染下拉框
						form.render("select");
						// 获取省份下拉框
						form.on('select(province)', function(proData) {
							// 获取到省份id
							let value = $('select[name=province]').val();
                                 // 把省份id传过去
								province(value);
						});
					// 省区获取到了默认执行获取市区
					}).done(function(data){
						// 默认传省份
						let value = $('select[name=province]').val();
						// 默认执行一次
						province(value);
					});
				// 获取市
			function province(data){
				console.log('市区',data);
			$.get("http://47.92.92.156:336/api/area/area",{province:data},
				function(data, status) {
					console.log('data', data);
					// 删除子元素
						$('select[name=city]').children().remove();
					// 动态渲染下来框
					let seleData = data.code;
					for (var i = 0; i < seleData.length; i++) {
						let option = document.createElement("option");
						option.setAttribute("value", seleData[i].id);
						option.innerText = seleData[i].name;
						$('select[name=city]').append(option);
					};
					//渲染下拉框
					form.render("select");
					// 渲染市区下拉框
					form.on('select(city)', function(proData) {
					// 默认传省份
					  let proval = $('select[name=province]').val();
						// 默认传市区
						let cityval = $('select[name=city]').val();
						console.log('val',value);
						// 默认执行一次
						
						let regionData={
							province:proval,
							city:cityval
						};
						citys(regionData);
					});
						// 市区渲染下拉后默认发送县级下拉
				}).done(function(data){
					    // 默认传省份
					      let proval = $('select[name=province]').val();
							// 默认传市区
							let cityval = $('select[name=city]').val();
							let regionData={
								province:proval,
								city:cityval
							};
							// 默认执行一次
							citys(regionData);
						});
			};
				// 获取县
				function citys(data){
					$.get("http://47.92.92.156:336/api/area/area",data,
						function(data, status) {
							console.log('data', data);
							// 删除子元素
								$('select[name=area]').children().remove();
							// 动态渲染下来框
							let seleData = data.code;
							for (var i = 0; i < seleData.length; i++) {
								let option = document.createElement("option");
								option.setAttribute("value", seleData[i].id);
								option.innerText = seleData[i].name;
								$('select[name=area]').append(option);
							}
							//渲染下拉框
							form.render("select");
						}).done(()=>{
							
							$.post("http://47.92.92.156:336/api/area/edit_show", {
									    id: regionId
									    },
									    function(data,status){
								console.log('data',data);
									  
									    });
						})
				};