首先將省市區的資料儲存到資料庫中

sql檔案地址:111.229.178.96

html

<select name="province" style="width: 150px;" class="province form-control">
       <option>==請選擇省==</option>
       @foreach($province as $item)
             <option value="{{ $item->id }}">{{ $item->name }}</option>
       @endforeach
 
</select>
<select name="city"  style="width: 150px;" class="city">
       <option value="0">==市==</option>
</select>
<select name="area"  style="width: 150px;" class="area">
      <option value="0">==區/縣==</option>
</select>

js

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"
 
></script>
<script type="application/javascript">
    $(function () {
        //當省選項值發生變化的時候，傳送ajax請求，獲取對應的市區資訊，並渲染
        $('.province').change(function () {
            var province = $(this).val();

            $.ajax({
                //請求方式
                type : "get",
                
 
//請求的媒體型別
                contentType: "application/json;charset=UTF-8",
                //請求地址
                url : "getcity",
                //資料，json字串
                data : {
                    "province":province
                },
                //請求成功
                dataType:"json",
                success : function(result) {
                    //console.log(result)
                    if(result.status == 0)
                    {
                        var citys = result.data;

                        var optionstr = "";
                        //渲染city選擇框
                        for(var i = 0; i < citys.length; i++)
                        {
                            var city = citys[i];
                            optionstr += "<option value='" + city.id + "'>" + city.name + "</option>";
                        }
                        $('.city').html(optionstr);
                    }
                    else
                    {
                        alert(result.message);
                    }
                },
                //請求失敗，包含具體的錯誤資訊
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        })
    })
    $(function () {
        //當省選項值發生變化的時候，傳送ajax請求，獲取對應的市區資訊，並渲染
        $('.city').change(function () {
            var city = $(this).val();
            console.log(city);
            $.ajax({
                //請求方式
                type : "get",
                //請求的媒體型別
                contentType: "application/json;charset=UTF-8",
                //請求地址
                url : "getarea",
                //資料，json字串
                data : {"city":city},
                //請求成功
                dataType:"json",
                success : function(result) {
                    //console.log(result)
                    if(result.status == 0)
                    {
                        var areas = result.data;
                        console.log(areas);
                        var optionstr = "";
                        //渲染city選擇框
                        for(var i = 0; i < areas.length; i++)
                        {
                            var area = areas[i];

                            optionstr += "<option value='" + area.id + "'>" + area.name + "</option>";
                        }

                        $('.area').html(optionstr);

                    }
                    else
                    {
                        alert(result.message);
                    }

                },
                //請求失敗，包含具體的錯誤資訊
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        })
    })

</script>

controller

//新增頁面 並獲取省的資訊
    public function addpaper(){
        $province = DB::table('region')->where('pid',100000)->get();
        return view('addpaper',compact('province'));
    }
    //市三級聯動
    public function getCity(Request $request)
    {
        $province = $request['province'];
        $citys = DB::table('region')->where('pid','=',$province)->get()->toArray();
        return json_encode(['status' => 0, 'data' => $citys]);
    }
    //區三級聯動
    public function getArea(Request $request)
    {
        $city = $request['city'];
        $area = DB::table('region')->where('pid','=',$city)->get()->toArray();
        return json_encode(['status' => 0, 'data' => $area]);
    }