laravel 中的 ajax 没有显示但在控制台中，我可以看到获取 url

问题描述

我正在制作 2 个下拉列表，第二个下拉列表依赖于第一个。这是我的视图代码：

                                <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="form-group">
                        <label class="form-label">General</label>
                    <select class="form-control formselect required" 
                                     placeholder="Select Category" id="sub_category_name">
                                         <option value="0" disabled selected>Select
                                         Main Category*</option>
                                      @foreach($data as $categories)
                                       <option  value="{{ $categories->id }}">
                                       {{ ucfirst($categories->catname) }}</option>
                                        @endforeach
                    </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label class="form-label">Sub</label>
                                            <select class="form-control formselect required" 
                                      placeholder="Select Sub Category" id="sub_category">
                                          </select>
                                        </div>
                                    </div>

然后这是我在控制器中的代码： 公共函数索引（请求 $request） {

    $data = DB::table('cats')->get();
    return view('admin.genc.gencEntry')->with('data',$data);
    }
  

    public function subcat($id){
        echo json_encode(DB::table('subcats')->where('catid',$id)->get());
    }

Ajax 在这里：

<script>
            $(document).ready(function () {
            $('#sub_category_name').on('change',function () {
            let id = $(this).val();
            $('#sub_category').empty();
            $('#sub_category').append(`<option value="0" disabled selected>Processing...</option>`);
            $.ajax({
            type: 'GET',url: 'subcat/' + id,success: function (response) {
            var response = JSON.parse(response);
            console.log(response);   
            $('#sub_category').empty();
            $('#sub_category').append(`<option value="0" disabled selected>Select Sub Category*</option>`);
            response.forEach(element => {
                $('#sub_category').append(`<option value="${element['id']}">${element['subcatname']}</option>`);
                });
            }
        });
    });
});
</script>

但是当我从第一个下拉列表中选择一个选项时，第二个没有显示任何内容。 但是我可以在控制台中看到 XHR 已完成加载：GET "http://www.example.com:8000/genc/subcat/7"。

谁能告诉我导致空下拉列表的错误在哪里？

解决方法

看起来你的循环语法有问题，像这样使用 $.each(response,function(key,element) { $('#sub_category').append(<option value="${element['id']}">${element['subcatname']}</option>); });