在数据库有地区表的情况下实现省市区三级联动

数据表省市区三级联动

在工作中，老是会遇到地址三级关联，公司（外包）给了要求是能使用插件的绝不要自己写，美其名曰：不要重复造轮子。我的想法是：你得知道轮子是怎么造的，才不去做重复性肉鸡行为。

所以自己就写了一个。

sql国家地址表：http://pan.baidu.com/s/1gfslGkV

用到的东西:jquery,php,thinkphp框架和一张国家地区表

前台模板页面 index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="//cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
    <title>登陆测试</title>
</head>
<body>
<select name="sheng" id="sheng">
    <option value="请选择所在省份">请选择所在省份</option>
    <volist name="sheng" id="vo1">
        <option value="{$vo1.region_id}" id="sheng">{$vo1.region_name}</option>
    </volist>
</select>

<select name="city" id="city" style="display: none;">

</select>

<select name="xian" id="xian" style="display: none;">

</select>

<script>
    $(function () {
        $('#sheng').change(function () {
            //省份更改后，城市，县城的情况都要被全部更新（先清除，再添加）
            $("#city").css('display','none');
            $("#city").children().remove();     //去除原来的城市列表
            $("#xian").css('display','none');
            $("#xian").children().remove();     //去除原来的县级列表

            var value = this.value;            //获取省份value作为城市的parent_id
            var url = '__CONTROLLER__/region';
            $.ajax({                            //jquery ajax
                type:'post',
                url:url,
                data:{'value':value},
                success:function (data) {
                    var result = JSON.parse(data);
                    //为了防止直辖市情况下，change条件无法触发
                    $("#city").append("<option value='请选择所在城市'>请选择所在城市</option>");
                    for(var i = 0;i < result.length;i ++){
                        /*循环添加所有城市列表*/
                        $("#city").append("<option value='"+result[i].region_id+"'>"+result[i].region_name+"</option>");
                        $("#city").css('display','inline');
                    }
                }
            });
        });
        /*同上*/
        $('#city').change(function () {
            //城市更改后，更新县级数据
            $("#xian").css('display','none');
            $("#xian").children().remove();

　　　　//这里的value不要和上面的重复，否则变量提升机制会覆盖掉前面的变量值
            var valueCity = this.value;
            var urlCity = '__CONTROLLER__/region';
            $.ajax({
                type:'post',
                url:urlCity,
                data:{'value':valueCity},
                success:function (data) {
                    var result = JSON.parse(data);
                    for(var i = 0;i < result.length;i ++){
                        /*alert(result[i].region_id + ' '+result[i].region_name);*/
                        $("#xian").append("<option value='"+result[i].region_id+"'>"+result[i].region_name+"</option>");
                        $("#xian").css('display','inline');
                    }
                }
            })

        });
    });
</script>
</body>
</html>

后台是使用的thinkphp框架

<?php
namespace HomeController;
use ThinkController;

class RegionController extends Controller
{
    public function index(){
        $region = M('region');
        $condition['parent_id'] = 1;
        $sheng = $region->where($condition)->select();
        $this->assign('sheng',$sheng);
        $this->display();
    }

    public function region(){
        if (IS_AJAX){
            $region = M('region');
            $condition['parent_id'] = $_POST['value'];
            $city = $region->where($condition)->select();
            echo json_encode($city);
        }
    }

}

这样就实现了三级联动，希望自己以后，不要成为码农，要懂得思考。