Dynamic Dependent Drop down selection in Laravel - php

Question

HI everyone I'am working on dynamic dependent dropdown selection but i can't achieve the required output , when i select something in column of the State , column of the city stay always empty .
This is my controller specvil.php:
public function index () {
$ville=Vil::orderBy('Ville','desc')->get();
return view ('index',['vi'=>$ville]);
}
public function deleg(Request $request)
{
$delegation = DB::table("delegation")
->where("ville_id",$request->ville_id)
->pluck("ville","id");
return response()->json($delegation);
}
And this is the view of the form index.php:
<form action="{{route('ghof')}}" method="get">
{{ csrf_field() }}
<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>
This is the script :
<script type="text/javascript">
$('#Région').change(function(){
var countryID = $(this).val();
if(countryID){
$.ajax({
type:"GET",
url:"{{url('deleg')}}?ville_id="+countryID,
success:function(res){
if(res){
$("#ville").empty();
$("#ville").append('<option>Select</option>');
$.each(res,function(key,value){
$("#ville").append('<option value="'+key+'">'+value+'</option>');
});
}else{
$("#ville").empty();
}
}
});
</script>
and finaly this is the route :
Route::get('/index','specvil#index');
Route::get('deleg','specvil#deleg');

Answer 1

Maybe this is the problem. You are passing Ville desc as an option value instead of passing Ville id which then causes you to match Ville desc to Ville id in deleg() method of your controller.