@Cronix @D9705996 @cmdobueno @jlrdw @cmdobueno
Can you please give me the Solution...?
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I Need a Cascading Dropdown for my admin panel, where the dropdown values come from database. [[ example: https://prnt.sc/lccqc4 ]] I need to be work like this: https://prnt.sc/lccq7o
When I select Route no, the values of other dropdown will show related pickpoint names of that selected route. This is my ajax code I have written in php file (app-admin.blade.php):
$(document).ready(function() {
$(document).on('change', '.selectRouteNo', function() {
var route_id = $(this).val();
var div = $(this).parent();
var op = " ";
$.ajax({
type: "GET",
url: '{!!URL::to(' / admin / allteacher / create / ')!!}',
data: {
'id': route_id
},
dataType: "JSON",
success: function(data) {
alert('Data Found');
op += '<option value="0" selected disabled>Select Pick Point</option>';
for (var i = 0; i < data.length; i++) {
op += '<option value="' + data[i].id + '">' + data[i].stoppagePoint + '</option>';
}
div.find('.stoppagePoint').html(" ");
div.find('.stoppagePoint').append(op);
},
error: function() {
alert('Data Not Found');
}
});
});
});
My controller is like that:
public function create(){
return view('allteacher.create')
->with('allRoutes', AllRoute::all())
->with('allDepartments', AllDepartment::all());
}
public function findRouteById($id){
$data=Product::select('routeNo','id')
->where('stoppagePoint',$request->id)
->get();
return response()->json($data);
}
This Is My Create (DropDown Form) Page:
<div class="col-md-4">
<div class="fire_select2 fire_select">
<label>Route No</label>
<select name="routeNo" id="selectRouteNo" class="selectRouteNo" required>
<option value="">Select Route No.</option>
@foreach($allRoutes as $route)
<option value="{{ $route->routeNo }}">{{ $route->routeNo }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-4">
<div class="fire_select2 fire_select">
<label>Pick Point</label>
<select name="pickPoint" id="selectPickPoint" class="routeClass" required>
<option value="">Select Pick Point</option>
</select>
</div>
</div>
Please or to participate in this conversation.