【layui】省市区的三级联动

• html代码

<!------省市区的三级联动-----!-->
<div class="layui-form-item">
     <label class="layui-form-label">门店地区</label>
     <div class="layui-input-block">
         <div class="layui-input-inline addr_inline">
             <select name="province_code" id="province" lay-filter="province" lay-verify="required">
                 <!-- <option value="">请选择省</option> -->
             </select>
         </div>
         <div class="layui-input-inline addr_inline">
             <select name="city_code" id="city" lay-filter="city" lay-verify="required">
                 <!-- <option value="">请选择市</option> -->
             </select>
         </div>
         <div class="layui-input-inline addr_inline" style="margin-right: 0;">
             <select name="district_code" id="area" lay-filter="area">
                 <!-- <option value="">请选择县/区</option> -->
             </select>
         </div>
     </div>
 </div>
<!------省市区的三级联动-----!-->

• js代码

	shengshiqu();
	//省市区的三级联动
	var str = '', cur_data = '';
	// 省市县
	function shengshiqu(){
	    admin.req({
	        url: layui.setter.baseUrl + 'admin/user/getRegionTree',
	        data: {},
	        type: 'get',
	        success: function (res) {
	            if (res.code == 1) {
	                str = res.data;
	                //-------------省
	                var list = "";
	                var list = "<option value=''>请选择省</option>";
	                for (var i in res.data) {
	                    list += "<option value='" + res.data[i].value + "'>" + res.data[i].text + "</option>";
	                }
	                $("#province").html(list);
	
	                if(params.id){ // 编辑
	                    form.val('ants_add',{ 'province_code': params.province_code });
	                    //市
	                    var f_index='';
	                    var cate_data='';
	                    for(var i in res.data){
	                        if(params.province_code==res.data[i].value){
	                            f_index=i;
	                            cate_data=res.data[i].children;
	                        }
	                    }
	                    var lists="<option value=''>请选择市</option>";
	                    for (var j in cate_data) {
	                        lists += "<option value='" + cate_data[j].value + "'>" + cate_data[j].text + "</option> ";
	                    }
	                    $("#city").html(lists);
	                    form.val('ants_add',{ 'city_code': params.city_code });
	
	                    //县/区
	                    var city_data=res.data[f_index].children;
	                    var lists2="<option value=''>请选择县/区</option>";
	                    for (var j in city_data) {
	                        lists2 += "<option value='" + city_data[j].value + "'>" + city_data[j].text + "</option> ";
	                    }
	                    $("#area").html(lists2);
	                    form.val('ants_add',{ 'district_code': params.district_code });
	                    form.render();
	                }
	                form.render('select');
	            } else {
	                layer.msg(res.msg);
	            }
	        }
	    });
	}
	// 选择省
	form.on('select(province)', function (e) {
	    if(e.value == ''){
	        $("#city").html('');
	        $("#area").html('');
	    }else{
	        get_tree(e.value, 0, 0);
	        $("#area").html('');
	    }
	    form.render();
	});
	//选择市
	form.on('select(city)', function (e) {
	    if(e.value == ''){
	        $("#area").html('');
	    }else{
	        get_tree($('#province').val(), e.value, 0);
	    }
	    form.render();
	});
	//选择区县
	form.on('select(area)', function (e) {});
	function get_tree(p, c, a) {
	    for (var i in str) {
	        if (str[i].value == p) {
	            var city = "<option value=''>请选择市</option>";
	            var city_data = str[i].children;
	            for (var j in city_data) {
	                city += "<option value='" + city_data[j].value + "'>" + city_data[j].text + "</option> ";
	                if (city_data[j].value == c) {
	                    var area = "<option value=''>请选择区/县</option>";
	                    var area_data = city_data[j].children;
	
	                    if (area_data) {
	                        for (var k in area_data) {
	                            area += "<option value='" + area_data[k].value + "'>" + area_data[k].text + "</option> ";
	                        }
	                        $("#area").html(area);
	                        form.render();
	                    } else {
	                        area_data = city_data;
	                        for (var k in area_data) {
	                            area += "<option value='" + area_data[k].value + "'>" + area_data[k].text + "</option> ";
	                        }
	                        $("#area").html(area);
	
	                        form.render();
	                    }
	
	                }
	            }
	            $("#city").html(city);
	            if (c != 0) { $("#city").val(c); }
	            form.render();
	        }
	    }
	}