全国城市地址联动选择layui

全国城市地址联动选择layui




HTML–代码

<form class="layui-form">
    <div class="layui-form-item layui-form-pane">
        <label class="layui-form-label">城市联动</label>
        <div class="layui-input-inline" >
            <select name="province" lay-verify="required" lay-search="" lay-skin="select" lay-filter="province" >
                <option value="">请选择省</option>
               <foreach name="arealist" item="v">
                   <option value="{$v.id}">{$v.area_name}</option>
               </foreach>
            </select>
        </div>
        <div class="layui-input-inline" >
            <select name="city" lay-verify="required" lay-search="" lay-skin="select" lay-filter="city" id="city">
                <option value="">请选择市/县</option>
            </select>
        </div>
        <div class="layui-input-inline" >
            <select name="area" lay-verify="required" lay-search=""lay-skin="select" lay-filter="area" id="area">
                <option value="">请选择镇区</option>
            </select>
        </div>
            <div class="layui-input-inline" >
            <select name="area" lay-verify="required" lay-search=""lay-skin="select" lay-filter="street" id="street">
                <option value="">请选择街道</option>
            </select>
        </div>
    </div>
</form>

js–代码

<script>
    layui.use(['form', 'layedit', 'laydate'],
    function() {
        var $ = layui.jquery,
        form = layui.form,
        layer = layui.layer,
        layedit = layui.layedit,
        laydate = layui.laydate;

        //监听省份选择
        form.on('select(province)',
        function(data) {
            $('#city').html('<option value="">请选择市/县</option>');
            $('#area').html('<option value="">请选择镇区</option>');
            $('#street').html('<option value="">请选择街道</option>');
            $.ajax({
                url: "{:U('Admin/getchildarea')}",
                data: {
                    parent_id: data.value
                },
                type: 'POST',
                dataType: 'json',
                success: function(data1) {
                    if (data1.error == 0) {
                        $("#city").append(data1.option);
                        form.render('select'); //刷新select选择框渲染
                    }
                }
            });
        });
        form.on('select(city)',
        function(data) {
            $('#area').html('<option value="">请选择镇区</option>');
            $('#street').html('<option value="">请选择街道</option>');
            $.ajax({
                url: "{:U('Admin/getchildarea')}",
                data: {
                    parent_id: data.value
                },
                type: 'POST',
                dataType: 'json',
                success: function(data1) {
                    if (data1.error == 0) {
                        $("#area").append(data1.option);
                        form.render('select'); //刷新select选择框渲染
                    }
                }
            });
        });
        //监听省份选择
        form.on('select(area)',
        function(data) {
            $('#street').html('<option value="">请选择街道</option>');
            $.ajax({
                url: "{:U('Admin/getchildarea')}",
                data: {
                    parent_id: data.value
                },
                type: 'POST',
                dataType: 'json',
                success: function(data1) {
                    if (data1.error == 0) {
                        $("#street").append(data1.option);
                        form.render('select'); //刷新select选择框渲染
                    }
                }
            });
        });

        //监听提交
        form.on('submit(demo1)',
        function(data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }) return false;
        });

    });
</script>

Thinkphp—代码:

public function index(){
		$this->display();
	}
	//联动选择页面
	public function arealists(){
		$this->arealist 	=	M('area')->where(array('parent_id' => 0))->select();
		$this->display();
	}
	//获取子地区
	public function getchildarea() {
		$where['parent_id'] = I('post.parent_id');
		if (I('post.putype') == 1) {
			$where['is_open'] = 1;
		}
		$area = M('Area')->field('id, area_name, is_reg, is_open')->where($where)->select();
		if ($area) {
			$option = '<option value="">---请选择---</option>';
			foreach ($area as $key => $value) {
				$option .= '<option value="'.$value['id'].'">'.$value['area_name'].'</option>';
			}
			echo json_encode(array('error' => 0, 'option' => $option));
		} else {
			echo json_encode(array('error' => 1));
		}
	}

文章来自—https://fly.layui.com/jie/13839/