javascript - 具有hasMany关系的laravel动态下拉列表

Question

如何在使用javascript或jquery选择具有hasMany关系的类别时显示子类别？

那里有我的父表

 public function ChildrenRasHewan() {
        return $this->hasMany(RasHewan::class,'jenis_hewan_id');
    }

这是我的子表又名子类别

 public function ParentJenisHewan() {
        return $this->belongsTo(JenisHewan::class,'jenis_hewan_id','id');
    }

这就是我的控制器的样子：

  public function index()
    {
        $this->data['adopsi'] = Adopsi::paginate(10);
        return view('admin.dashboard.adopsi.index-adopsi', $this->data);
    }

  
    public function create()
    {
        $this->data['getStatusAdopsi'] = Adopsi::statusAdopsi();
        $this->data['jenisHewan'] = JenisHewan::pluck('nama_jenis_hewan');
        $this->data['rasHewan'] = JenisHewan::all();
        
        return view('admin.dashboard.adopsi.create-adopsi',$this->data);
    }

    public function getRasHewan($id) {
        $getRasHewan = DB::table('ras_hewans')->where('id',$id)->pluck('nama_ras_hewan','id');
        return json_encode($getRasHewan);
    }

这是我要应用动态下拉列表的索引视图：

                            <div class="form-group">
                                <label for="jenis_hewan_id">Jenis Hewan</label>
                                <select name="jenis_hewan_id" id="jenis_hewan_id" class="form-control @error('jenis_hewan_id') is-invalid @enderror" placeholder="">
                                    <option value="">Pilih Jenis Hewan</option>
                                    @foreach ($jenisHewan as $data)
                                     <option value="{{$data->id}}" type="text">{{$data->nama_jenis_hewan}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="ras_hewan_id">Ras Hewan</label>
                                <select name="ras_hewan_id" id="ras_hewan_id" class="form-control @error('ras_hewan_id') is-invalid @enderror" placeholder="" >
                                    <option value="" selected disabled>Pilih Ras Hewan</option>
                                    @foreach ($jenisHewan as $data)
                                    @if($data->ChildrenRasHewan))
                                        @foreach ($data->ChildrenRasHewan as $rasHewan )
                                        <option value="{{$rasHewan->id}}">{{$rasHewan->nama_ras_hewan}}</option>
                                        @endforeach
                                    @endif
                                 @endforeach
                                    <select name="ras_hewan_id" id="ras_hewan_id" class="form-control"></select>
                                </select>
                            </div>

    
 

js脚本：

<script>
        $(function() {
            $('select[name=service_id]').change(function() {

                var url = '{{ url('service') }}' + $(this).val() + '/categories/';

                $.get(url, function(data) {
                    var select = $('form select[name= category_id]');

                    select.empty();

                    $.each(data,function(key, value) {
                        select.append('<option value=' + value.id + '>' + value.name + '</option>');
                    });
                });
            });
        });
    </script>

标签： javascriptjquerylaraveldynamicdrop-down-menu