php laeavel框架三级联动_laeavel patch-优快云博客

本文链接：https://blog.youkuaiyun.com/liuphpgoooo/article/details/109472065

本文介绍了一个使用Ajax实现的级联选择器案例，该选择器能够根据用户选择的省份动态加载对应的市级选项，进一步根据市级选项加载区/县级选项。通过前后端交互，实现了地区数据的动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视图层

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  
    </script>
</head>
<body>
<select class="province">
    <option value="0">==请选择省==</option>
    @foreach($province as $item)
        <option value="{{ $item->id }}">{{ $item->name }}</option>
    @endforeach
</select>
<select class="city">
    <option value="0">==市==</option>
</select>
<select class="area">
    <option value="0">==区/县==</option>
</select>




</body>
</html>
<!-- 配置文件 -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script >
    var ue = UE.getEditor('my',{
        initialFrameHeight:300,
        initialFrameWidth:800
    });

</script>
<script type="application/javascript">
    $(function() {
        //当省选项值发生变化的时候，发送ajax请求，获取对应的市区信息，并渲染
        $('.province').change(function() {
            var province = $(this).val();

            $.ajax({
                //请求方式
                type: "get",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url: "city",
                //数据，json字符串
                data: {
                    "province": province
                },
                //请求成功
                dataType: "json",
                success: function(result) {
                    //console.log(result)
                    if (result.status == 0) {
                        var citys = result.data;

                        var optionstr = "<option value='0'>==市==</option>";
                        //渲染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);
                }
            });

        })
        $('.city').change(function() {
            var city = $(this).val();
            console.log(city);
            $.ajax({
                //请求方式
                type: "get",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url: "area",
                //数据，json字符串
                data: {
                    "city": city
                },
                //请求成功
                dataType: "json",
                success: function(result) {
                    //console.log(result)
                    if (result.status == 0) {
                        var cityss = result.data;

                        var optionstr = "<option value='0'>==市==</option>";
                        //渲染city选择框
                        for (var i = 0; i < cityss.length; i++) {
                            var city = cityss[i];

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

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

                    } else {
                        alert(result.message);
                    }

                },
            });
        })
    })
</script>

控制器

//查询省份
    public function creat(Request $request)
    {
        $province =  DB::table('china_area')->where('parent_id',1)->get();

        return view('mouth.creat',['province'=>$province]);
    }

    //查询市
public function city(Request $request)
{
    $province = $request['province'];


    $city = DB::table('china_area')->where('parent_id','=',$province)->get()->toArray();


    return json_encode(['status' => 0, 'data' => $city]);
}

//查询区
public function area(Request $request)
{
    $city = $request['city'];
    $area = DB::table('china_area')->where('parent_id','=',$city)->get()->toArray();
    return json_encode(['status' => 0, 'data' => $area]);
}

路由

    //省份
    Route::get('creat','MouthController@creat')->name('admin.creat');

//市
    Route::get('city','MouthController@city');

//区
    Route::get('area','MouthController@area');