Hello Web developers I will show you how to do Laravel Dependent Dropdown Tutorial With Example. We will get the second drop-down item based on the first selected drop-down. When we select the first dropdown’s item, it will fire an AJAX request to the Laravel server and in return, we get a response and we need to append that response to the second dropdown. So it is called a dependent dropdown.
How to Install Laravel Project
Establish Laravel Project by the typing following command.
composer create-project --prefer-dist laravel/laravel laraveldropdownRead our Dependent dropdown in ReactJS : Dropdown in React JS
Download Project from here : Dropdown in Laravel
This is our database design
First make Routes for our project ( web.php )
Route::resource('/dropdown', 'DropdownController');
Route::get('/getCity/{id}', 'DropdownController@getCity'); // for get city list
Route::get('/getStadiumDetail/{id}', 'DropdownController@getStadiumDetail'); // for get city list
Now We will start code here . Make one controller DropdownController.php.
DropdownController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Redirect,Response;
class DropdownController extends Controller
{
function index()
{
$data['states'] = DB::table('states')->get();
return view("dropdown",$data);
}
function getCity()
{
$id = $_GET['myID'];
$res = DB::table('states')
->join('city','states.id','=','city.state_id')
->where('states.id', $id)
->get();
return Response::json($res);
}
function getStadiumDetail()
{
$id = $_GET['id'];
$res = DB::table('city')
->join('stadium','city.id','=','stadium.city_id')
->join('address','city.id','=','address.city_id')
->join('details','city.id','=','details.stadium_id')
->where('city.id', $id)
->get();
return Response::json($res);
}
}
Now make a view file for front-end Dropdown.php.
Dropdown.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3 class="text-center mt-4 text-secondary">Banking Type Dependent Dropdown</h3>
<div class="row mt-5">
<div class="col-sm-2">
<h5 class="text-info mb-4">Choose State List</h5>
<select name="" id="state" class="form-control">
<option><h1>Select State</h1></option>
@foreach($states as $row)
<option value={{$row->id}}>{{$row->state_name}}</option>
@endforeach
</select>
</div>
<div class="col-sm-3">
<h5 class="text-info mb-4"> City List</h5>
<select id="city" class="form-control" disabled >
<option>City List</option>
</select>
</div>
<div class="col-sm-3">
<h5 class="text-info mb-4">Stadiums List</h5>
<select id="stadium" class="form-control" disabled>
</select>
</div>
<div class="col-sm-4">
<h5 class="text-info mb-4">Stadiums Address</h5>
<select id="address" class="form-control" disabled>
</select>
</div>
<div class="col-sm-4 offset-sm-4 mt-4">
<h5 class="text-info mb-4">Stadium Details</h5>
<textarea id="details" cols="30" class="p-4" disabled></textarea>
</div>
</div>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// Get City List
$(document).ready(function(){
$('#state').change(function(){
var state = $('#state').val();
$('#city').html('');
$.ajax({
url:'getCity/{id}',
type:'GET',
data:{myID:state},
dataType: "json",
success:function(data)
{
$.each(data, function(key, city)
{
// alert(city.city_name)
$('#city').prop('disabled', false).css('background','aliceblue').append('<option value="'+city.id+'">'+city.city_name+'</option>');
});
}
});
});
});
// Get STADIUM and ADDRESS by CITY
$(document).ready(function(){
$('#city').change(function(){
var city = $('#city').val();
$.ajax({
url:'getStadiumDetail/{id}',
type:'GET',
data:{id:city},
dataType: "json",
success:function(data)
{
$.each(data, function(key, city)
{
$('#stadium').prop('disabled', false).css('background','aliceblue').html('<option>'+city.stadium_name+'</option>');
$('#address').prop('disabled', false).css('background','aliceblue').html('<option>'+city.stadium_add+'</option>');
$('#details').prop('disabled', false).css('background','aliceblue').html(city.stadium_details);
});
}
});
});
});
</script>
Now run this project in broswer .
thank so much