基于数据库、php、ajax的 3级地区联动

最新推荐文章于 2021-06-24 10:08:40 发布

帅气的龙哥

最新推荐文章于 2021-06-24 10:08:40 发布

阅读量643

点赞数 1

分类专栏： php 文章标签： php 3级联动数据库 ajax

本文链接：https://blog.csdn.net/liuhelong12/article/details/50819761

版权

php 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

之前每次要用地区联动基本都是用的其他人写好的js做的多级联动，但是发现最大的缺点就是地区信息太老，而且不方便更新。
今天在网上搜索到2015年最新的国家地域信息数据，就打算用数据库配合ajax来做联动，后台也可以很方便的进行数据更新

代码1（jquery代码，负责ajax数据联动前段）：

<div class="form-group">
    <label for="province">省份</label>
    <select class="form-control" id="province" name="province">
        <option value ="" ></option>
        //volist 是thinkphp的标签，这里我用thinkphp框架写的代码，自动载入省级地区信息
        <volist name="province" id="vo">
        <option value ="{$vo.class_id}" >{$vo.class_name}</option>
        </volist>
    </select>
    <label for="city">城市</label>
    <select class="form-control" id="city" name="city">
    </select>
    <label for="county">县区</label>
    <select class="form-control" id="county" name="county">
    </select>
</div>
<script>
$(document).ready(function(){
    //省数据变动
    $("#province").change(function(){
        $.post('/Home/Creat/ajax', {province:$("#province").val()},
        function(data){
                //alert('成功post回数据');
                if(data.info == 'ok') {
                    //返回ok，将市下拉框赋值
                    //alert(data.content);
                    col_clear('city');
                    col_add('city',data.content);
                    $("#city").change();
                } else {
                    alert(data.info);
                }
            }, 'json').error(function(){
        alert("网络连接错误，请稍后再试");
        });
    });
    //市数据变动
    $("#city").change(function(){
        $.post('/Home/Creat/ajax', {city:$("#city").val()},
        function(data){
                if(data.info == 'ok') {
                    col_clear('county');
                    col_add('county',data.content);
                } else {
                    alert(data.info);
                }
            }, 'json').error(function(){
        alert("网络连接错误，请稍后再试");
        });
    });
});

//select操作方法
// 添加  
function col_add(id,data) {
    var selObj = $("#"+id);
    for (var i=0;i<data.length;i++)
    {
        selObj.append("<option value='"+data[i].class_id+"'>"+data[i].class_name+"</option>");
    }

}
// 删除  
function col_delete() {
 var selOpt = $("#mySelect option:selected");  
 selOpt.remove();  
}
// 清空  
function col_clear(id) {
 var selOpt = $("#"+id+" option");  
 selOpt.remove();  
}
</script>

代码2（php后端数据判断交互代码，基于thinkphp写的，如果是其他框架，原理也是一样的，代码会有些小差入）：

public function ajax(){
        $city = M('city');
        if(!IS_AJAX){
           $this->ajaxReturn(array(
                'info' => '非法的请求方式'
            ));
        }
        //如果提交过来的是省份改变
        if(I('post.province',0,'intval')){
            $filter = array(
                'class_parent_id'     => I('post.province',0,'intval'),
                'class_type' => 2
            );
            $data['content'] = $city->where($filter)->select();
            $data['info'] = 'ok';
        }

        //如果提交过来的是城市改变
        if(I('post.city',0,'intval')){
            $filter = array(
                'class_parent_id'     => I('post.city',0,'intval'),
                'class_type' => 3
            );
            $data['content'] = $city->where($filter)->select();
            $data['info'] = 'ok';
        }

        $this->ajaxReturn($data);
    }