一个简单的三级联动+地区表

HTML代码

  <div class="form-group m-form__group row">
                        <label class="col-form-label col-lg-3 col-sm-12">省：</label>
                        <div class="col-lg-6 col-md-6 col-sm-12">


                            <select class="form-control m-bootstrap-select m_selectpicker" name="s" id="s">
                                <option value="0">--请选择省类型--</option>
                                {volist name=":model('area')->group('s')->select()" id="vo"}
                                <option  value="{$vo.id}">{$vo.s}</option>
                                {/volist}
                            </select>

                        </div>
                    </div>


                    <div class="form-group m-form__group row">
                        <label class="col-form-label col-lg-3 col-sm-12">市：</label>
                        <div class="col-lg-6 col-md-6 col-sm-12">


                            <select class="form-control m-bootstrap-select m_selectpicker" name="c" id="c">
                                <option value="0" >--请选择市--</option>

=
                            </select>

                        </div>
                    </div>

                    <div class="form-group m-form__group row">
                        <label class="col-form-label col-lg-3 col-sm-12"><span style="vertical-align: inherit;">区域</span></font></label>
                        <div class="col-lg-7 col-md-7 col-sm-12">
                            <div class="dropdown bootstrap-select show-tick form-control m-bootstrap-select m_">
                                <select class="form-control m-bootstrap-select m_selectpicker" multiple="" tabindex="-98" name="area" id="area">

                            </select>
                            </div>
                    </div>
                    </div>

js代码

<script>
        $('#s').change(function () {
                var sheng =  $("#s option:selected")[0].innerText;

            $.ajax({
                type: "POST",
                data: {s:sheng},
                url: "/a/get_city.html",
                success: function (data) {
                    //成功
                    if (data.code == 1) {
                        var info = data.data;
                        var options="";
                        for(var i=0;i<data.data.length;i++){
                            var d=info[i];
                                options+="<option value=''>"+d+"</option>";

                        }
                        $("#c").append(options);
                        //要以编程方式更新JavaScript的选择，首先操作选择，然后使用refresh方法更新UI以匹配新状态。 在删除或添加选项时，或通过JavaScript禁用/启用选择时，这是必需的。
                        $('#c').selectpicker('refresh');
                        //render方法强制重新渲染引导程序 - 选择ui,如果当您编程时更改任何相关值而影响元素布局，这将非常有用。
                        $('#c').selectpicker('render');


                }
            }
        })
        })


        $('#c').change(function () {
            var a =  $("#c option:selected")[0].innerText;
            var type ='a';
            $.ajax({
                type: "POST",
                data: {a:a,type:type},
                url: "/a/get_city.html",
                success: function (data) {
                    //成功
                    if (data.code == 1) {
                        var info1 = data.data;
                        var options1="";
                        for(var i=0;i<data.data.length;i++){
                            var d1=info1[i];
                            options1+="<option value=''>"+d1+"</option>";

                        }
                        $("#area").append(options1);
                        //要以编程方式更新JavaScript的选择，首先操作选择，然后使用refresh方法更新UI以匹配新状态。 在删除或添加选项时，或通过JavaScript禁用/启用选择时，这是必需的。
                        $('#area').selectpicker('refresh');
                        //render方法强制重新渲染引导程序 - 选择ui,如果当您编程时更改任何相关值而影响元素布局，这将非常有用。
                        $('#area').selectpicker('render');


                    }
                }
            })
        })
</script>

数据表链接
链接: https://pan.baidu.com/s/1eHKLC9Ttv7OXD61N3Ahsng 提取码: vrbk 复制这段内容后打开百度网盘手机App，操作更方便哦

php后台接收方法

  public function getcity()
    {

        $s= input('s');
        $a= input('a');
        $type =input('type') ?? '';
        if($type == 'a')
        {

            $c =Db::name('area')->where('c',$a)->group('a')->column('a');
        }else{

            $c =Db::name('area')->where('s',$s)->group('c')->column('c');
        }



        return json(['code' => 1, 'data' => $c, 'msg' => '编辑成功']);

    }