三级联动,地区三级联动

浏览:990 发布日期:2017/07/13 分类:功能实现
在开发中遇到三级联动,比如说三级分类的联动和地区的联动,点选第一级,第二级跟着动;点选第二级,第三级跟着动。具体的实施操作办法如下:
在开发中遇到三级联动,比如说三级分类的联动和地区的联动,点选第一级,第二级跟着动;点选第二级,第三级跟着动,如图:
具体的实施操作办法如下:

前端<div class="form-group">
                        <label class="col-sm-2 control-label">所在地区</label>
                        <div class="col-sm-10">
                            <select id="province_list" name="province" class="form-control form-control-50 sm-select">
                                <option value="">--请选择--</option>
                                <volist name="province" id="item">
                                    <option value="{$item['id']}">{$item['region_name']}</option>
                                </volist>
                            </select>
                            <select id="city_list" name="city" class="form-control form-control-50 sm-select-t sm-select">
                                <option value="">-- 请选择--</option>
                            </select>
                            <select id="area_list" name="area" class="form-control form-control-50 sm-select-t">
                                <option value="">-- 请选择--</option>
                            </select>
                        </div>
                    </div>


$('#province_list').change(function(){
                $('#city_list option[value!=""]').remove();
                $('#area_list option[value!=""]').remove();
                var province = $(this).val();
                $.ajax({
                    url:"{:U('Require/ajaxGetRegion')}",
                    type:'get',
                    data:{id:province},
                    success:function(data){
                        var html ='<option value="">--城市--</option>';
                        for(var i in data){
                            html += '<option value="'+data[i].id+'">'+data[i].region_name+'</option>';
                        }
                        $('#city_list').html(html);
                    }
                })
            });

            $('#city_list').change(function(){
                $('#area_list option[value!=""]').remove();
                var city = $(this).val();
                $.ajax({
                    url:"{:U('Require/ajaxGetRegion')}",
                    type:'get',
                    data:{id:city},
                    success:function(data){
                        var html ='<option value="">--地区--</option>';
                        for(var i in data){
                            html += '<option value="'+data[i].id+'">'+data[i].region_name+'</option>';
                        }
                        $('#area_list').html(html);
                    }
                })
            });
后端/**
     * 获取地区
     */
    public function ajaxGetRegion(){
        $where['parent_id'] = I('get.id');
        $result = M('Region')->where($where)->field('id,region_name')->order('sort desc')->select();
        $this->ajaxReturn($result,'JSON');
    }
数据库文件见附件






评论( 相关
后面还有条评论,点击查看>>