jquery - 动态依赖下拉框在 laravel 中使用 ajax 不起作用

Question

我正在使用 Ajax 进行动态依赖下拉选择

当我选择第一列时，第二列始终为空，并且不显示城市列表。

Controller 代码:

 public function  index  () {
        $ville=Vil::orderBy('Ville','desc')->get();         
        return view ('index',['vi'=>$ville ]);

public function delegation ($id)

    {
        $delegation = DB::table("delegation")
        ->where("ville_id",$request->ville_id)
        ->pluck("ville","id");
        return response()->json($delegation);
    }

我的路线:

Route::get('delegation','specvil@deleg');
Route::get('/index','specvil@index');

Jquery 代码:

<script>

    $('select[name="Région"]').on('change', function () {
    var countryID = $(this).val();
    if (countryID) {
        $.get('/deleg/' + countryID, function (data) {
            $('select[name="ville"]').empty();
            $.each(data, function (key, value) {
                $('select[name="ville"]').append('<option value="' + key + '">' + value + '</option>');
            });
        }, 'json');
    } else {
        $('select[name="ville"]').empty();
    }
    }):
    });         
</script>

View :

<form action="{{route('ghof')}}" method="get">
   {{ csrf_field() }}
   <div class="from-box">
      <input type="text" class="search-field business" name="rech" value="" placeholder ="Cherchez..">
      <select type="text" class="search-field location" name="spec" id="s" value="spec" placeholder ="Spécialités">
         <option selected></option>
         @foreach($sp as $ss)
         <option value=" {{$ss->Spécialité}}"> {{$ss->Spécialité}}</option>
         @endforeach
      </select>
      <select type="text" class="search-field location" name="Région" id="Région" value="Région">
         <option selected></option>
         @foreach($vi as $vv)
         <option value="{{$vv->Ville}}">{{$vv->Ville}}</option>
         @endforeach
      </select>
      <select type="text" class="search-field location" name="ville" id="ville">
      </select>
      <button class="search-btn" type="submit" id="search"> Recherche </button>
   </div>
</form>

Answer 1

让我们修复您的选择元素 改变

<select type="text" class="search-field location" name="Région" id="Région" value="Région">

至

<select class="search-field location" name="region" id="region">

在你的 Controller 中

public function delegation ($id)

这里您接受一个变量($id)，因此您需要修复您的 ROUTE

并改变

->where("ville_id",$request->ville_id)

至

->where("ville_id", $id)

改变

Route::get('delegation','specvil@deleg');

至

Route::get('deleg/{id}','specvil@delegation');

如您所见，您的路线需要接受变量并始终使用您的 Ajax 路径检查路线路径。您的 Controller 方法名称必须与@字符后的方法名称相同。

jquery:

$('select[name="Région"]')

至

$('select[name="region"]')