thinkPHP省市区三级联动

先上效果

image.png

html部分，这个是基于bootstarp的，需要引入相应的文件。

  所在地
  
  

    

      
        --请选择--
      
    
    

       
    
    

       
    
  

js部分

/**
     * 地区选择三级联动
     * @param provinceId 省下拉选项框ID
     * @param cityId 市下拉选项框ID
     * @param areaId 区下拉选项框ID
     * @param valId  隐藏输入框ID
     */
    function selectCity(provinceId, cityId, areaId, valId) {
        var provinceId = "#" + provinceId;
        var cityId = "#" + cityId;
        var areaId = "#" + areaId;
        var valId = "#" + valId;
        var data = {:json_encode($city)};
        //console.log(data);
        //操作DOM，加载数据到下拉列表 foreach
        $.each(data, function (index, item) { //循环data数据中每一个
            $(provinceId).append("" + item.name + "");

        });
        //点击不同的省，加载市
        $(provinceId).bind("change", function () {
            //得到哪个省被点击

            var province = $(this).val();//得到当前省份
            $(valId).val(province);
            var city = data[province].child;//得到当前省份的所有城市
            //加载该省的数据

            $(cityId).empty();//重新选择省时候清空城市列表
            $(areaId).empty();//重新选择省时候清空区列表
            $(cityId).append("请选择");
            $.each(city, function (index2, item) {

                $(cityId).append("" + item.name + "");

            });

        });

        $(cityId).bind("change", function () {

            $(areaId).empty();//重新选择城市时候清空区列表
            $(areaId).append("请选择");

            var province = $(provinceId).val(); //得到当前省
            var citynum = $(this).val();//得到当前城市
            $(valId).val(citynum);
            //console.log(data[province].child[citynum]);
            var are = data[province].child[citynum].child; //得到当前城市所对应的城区


            $.each(are, function (index3, item) {
                $(areaId).append("" + item.name + "");

            });

        });
        $(areaId).bind("change", function () {
            $(valId).val($(this).val());
        });


    }
//在这里使用
$(document).ready(
        selectCity("province", "city", "area", "domicile")
    );

PHP代码

//三级联动地区
        $list = Db::name('region')->select();
        foreach ($list as $val) {
            $items[$val['id']] = $val;
        }
        foreach ($items as $item) {
            $items[$item['parent_id']]['child'][$item['id']] = &$items[$item['id']];
        }
        $this->assign('city', $items[0]['child']);

数据库文件

https://gitee.com/kltt22/code-block/blob/master/mo_region.sql