Laravel中的动态组合框

Question

我有4个表：metier，tache，technicien和tarificationtache 我有多个关系，而且在定价表格中我有以下字段（id，tache-id，tariff）

在此代码中，我会显示metier的列表，然后是tache选择的metier链接列表，然后是tarificationtache的{​​{1}}链接列表现在，我显示一个包含此tache

的technician链接的表格

tarificationtache

route.php

@extends('Layouts/app')
@extends('Layouts/master')
@section('content')
  <!--  jQuery -->
 <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
 </script>
<script type="text/javascript">
var getTachesByMetierUrl = "{{url('/tachesbymetier')}}";
    var getAdresseByClientUrl = "{{url('/adressebyclient')}}";
    var getTarificationsByTacheUrl = "{{url('/tarificationsbytache')}}";
    var getTechniciensByTarificationUrl = " 
 {{url('/techniciensbytarification')}}";

function getAdresseByClient(val) {
        if(val.length>0) {
            var client_id = val;
            $.get(getAdresseByClientUrl+'/'+client_id,function(res) {
                var html = '<option value="">-Select-</option>' ;
                $.each(res.adresses,function(index,item) {
                    html+='<option 
 value="'+item.id+'">'+item.code_postal+'</option>';
                });
                $('#adresses').html(html);

            });
        }
    }


    function getTachesByMetier(val) {
        if(val.length>0) {
            var metier_id = val;
            $.get(getTachesByMetierUrl+'/'+metier_id,function(res) {
                var html = '<option value="">-Select-</option>' ;
                $.each(res.taches,function(index,item) {
                    html+='<option 
  value="'+item.id+'">'+item.libelle_tache+'</option>';
                });
                $('#taches').html(html);

            });
        }
    }
    function getTarificationsByTache(val) {

        if(val.length>0) {
            var tache_id = val;
            $.get(getTarificationsByTacheUrl+'/'+tache_id,function(res) {
                var html = '<option value="">-Select-</option>' ;
                $.each(res.tarifications,function(index,item) {
                    html+='<option 
 value="'+item.id+'">'+item.tarif+'</option>';
                });
                $('#tarifications').html(html);

            });
        }
    }

    function getTechniciensByTache(val) {
        if(val.length>0) {
            var tarification_id = val;
            $.get(getTechniciensByTacheUrl+'/'+tache_id,function(res) {
                var html = '<option value="">-Select-</option>' ;
                $.each(res.techniciens,function(index,item) {
                    html+='<option 
 value="'+item.id+'">'+item.technicien_id+'</option>';
                });
                $('#techniciens').html(html);

            });
        }
    }
</script>

@if(count($errors))
    <div class="alert alert-danger" role="alert">
        <ul>
            @foreach($errors ->all() as $message)
                <li>{{$message}}</li>
            @endforeach
        </ul>
    </div>
 @endif
 <div class="container">
    <div class="row"></div>
    <div class="col-md-10">
        <h1>Ajout Intervention</h1>
        <form action=" {{url ('intervention')  }}" method="post">
            {{csrf_field()}}
            <div class="form-group">
                <label for="client">Client</label>
                <select onchange="getAdresseByClient(this.value)" 
 name="client_id" id="client" 
      class="form-control">
                    <option value="">-Select-</option>
                    @foreach($client as $t)
                        <option value="{{$t->id }}">
                            {{$t->user->nom}}
                        </option>
                    @endforeach
                </select>
            </div>


            <div class="form-group">
                <label for="">date intervention</label>

                <input class="form-control" type="date" id="example-date- 
 input" name 
     ="date_intervention" value="{{old('date_intervention')}}">
            </div>

            <div class="form-group">
                <label for="">description</label>
                <input type="text"  name ="description" class="form- 
 control"value=" 
      {{old('description')}}">
            </div>


            <div class="form-group">
                <label for="">duree_prevu</label>
                <input class="form-control" type="datetime-local"  name 
  ="duree_prevu" value=" 
    {{old('duree_prevu')}}">
            </div>
     <div class="form-group">
                <div class="col-md-12">
                <div class="col-md-4">
                <label>Metier: </label>
                <select onchange="getTachesByMetier(this.value)" 
  style="width: 200px"   
      class="productm form-control" id="metiers">
               <option value="">-Select-</option>
                    @foreach($metiers as $t)
                        <option value="{{$t->id }}">
                            {{$t->libelle_metier}}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-4">
                <label>tache: </label>
                <select onchange="getTarificationsByTache(this.value)" 
 style="width: 200px" 
    class="productname form-control" name="tache" id="taches">
                <option value="">-Select-</option>
                </select>
            </div>

            <div class="col-md-4">
                <label>tarification: </label>
                <select onchange="getTechniciensByTache(this.value)" 
 style="width: 200px" 
      class="productname form-control" name="tarification_id" 
 id="tarifications">
                <option value="">-Select-</option>
                </select>
            </div>

            <div class="col-md-4">
                <label>Technicien: </label>
                <select style="width: 200px" class="productname form- 
 control" 
      name="technicien_id" id="techniciens">
                <option value="">-Select-</option>
                </select>
            </div>
</div>
 </div>
</div>
 </div>
 </div>
<link 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
    rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
datepicker/1.5.0/css/bootstrap- 
    datepicker.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"> 
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
datepicker/1.5.0/js/bootstrap- 
   datepicker.js"></script>
@endsection