thinkPHP省市区三级联动

先上效果

image.png

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

<div class="form-group">
  <label>所在地</label>
  <input type="hidden" class="form-control" name="domicile" id="domicile" value=""/>
  <div class="col-sm-12">
    <div class="col-sm-4">
      <select name="input_province" id="province" class="form-control">
        <option value="">--请选择--</option>
      </select>
    </div>
    <div class="col-sm-4">
      <select name="input_city" id="city" class="form-control"> </select>
    </div>
    <div class="col-sm-4">
      <select name="input_area" id="area" class="form-control"> </select>
    </div>
  </div>
</div>

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("<option value=" + index + ">" + item.name + "</option>");

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

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

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

                $(cityId).append("<option value=" + index2 + ">" + item.name + "</option>");

            });

        });

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

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

            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("<option value=" + index3 + ">" + item.name + "</option>");

            });

        });
        $(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