Javascript 具有多种关系的laravel动态下拉列表

如何使用javascript或jquery在所选类别具有多个关系时显示子类别

这是我父母的桌子

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

这是我的子表a.k.a子类别

 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>

    
 

杰尼斯·赫万
皮利赫·杰尼斯·赫万
@foreach（$jenisHewan作为$data）
{{$data->nama_jenis_hewan}
@endforeach
拉斯赫万
皮利哈斯河湾酒店
@foreach（$jenisHewan作为$data）
@如果（$data->ChildrenRasHewan））
@foreach（$data->ChildrenRasHewan as$rasHewan）
{{$rasHewan->nama_ras_hewan}
@endforeach
@恩迪夫
@endforeach

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>

$（函数（）{
$（'select[name=service_id]'）。更改（函数（）{
var url='{url（'service'）}}}+$（this.val（）+'/categories/'；
$.get（url、函数（数据）{
var select=$（“表单选择[name=category_id]”）；
select.empty（）；
$。每个（数据、函数（键、值）{
select.append（“”+value.name+“”）；
});
});
});
});

您介意发布您正在使用的javascript吗$（function（）{$（'select[name=service_id]'））.change（function（）{var url='{{{url（'service'）}}}}}+$（this.val（）++'/categories/'；$.get（url，function（data）{var select=$（'formselect[name=category_id]'））；select.empty（）；$。每个（数据，函数（键，值）{select.append（''+value.name+''；}）；}）；}）；无法在此帖子中添加javascript代码，因为我的帖子中添加了太多代码。是的，所以这是一个宠物收养项目，JenisHewan是家长，RasHewan（动物种族）作为孩子，JenisHewan有一个与RasHewan相关的模型。这就是我想要的，当我使用选择选项Dog时，我想显示当前与“Dog”值相关的内容