Laravel Dynamic Dependent Dropdown Example
In this tutorial, I am going to do a simple laravel dependent dropdown using jquery ajax. In this simple example through we understand how to work dependent dropdown in laravel even if you beginner. you will able to create dynamic dependent dropdown in laravel 6, laravel 7 and laravel 8 version.
We sometimes require to make dependent dropdown like when state select at that time bellow city drop down list should change, i mean related to selected state. In this example i have two tables and there are listed bellow:
1.demo_state
2.demo_cities
So, when user will change state at that time, dynamically change city drop down box from database. you can implement this example in your application by follow bellow few step.
After complete bellow example, you will find layout as bellow:
Preview:
Step 1: Create Tables
In first step we have to create migration for demo_state and demo_cities tables using Laravel 5 php artisan command, so first fire bellow command:
php artisan make:migration create_state_city_tables
After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create tables.
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateStateCityTables extends Migration
{
public function up()
{
Schema::create('demo_state', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->timestamps();
});
Schema::create('demo_cities', function (Blueprint $table) {
$table->increments('id');
$table->integer('state_id');
$table->string('name');
$table->timestamps();
});
}
public function down()
{
Schema::drop('demo_cities');
Schema::drop('demo_state');
}
}
After this migration, you should run migration using artisan command like as bellow:
php artisan migrate
Now, in your database, you will have two tables "demo_state" and "demo_cities". Now we require to add some dummy data in both table like as bellow image.
demo_state
demo_cities
Step 2: Add Route
In this is step we need to create route two, one for layout and second for ajax request. so open your app/Http/routes.php file and add following route.
Route::get('myform',array('as'=>'myform','uses'=>'[email protected]'));
Route::get('myform/ajax/{id}',array('as'=>'myform.ajax','uses'=>'[email protected]'));
Step 3: Add Controller Method
Ok, now we should create new controller as HomeController if you haven't before in this path app/Http/Controllers/HomeController.php. this controller will manage layout and dynamic ajax data, so put bellow content in controller file:
app/Http/Controllers/HomeController.php
namespace App\Http\Controllers;
use App\Http\Requests;
use Illuminate\Http\Request;
use DB;
class HomeController extends Controller
{
/**
* Show the application layout
*
* @return \Illuminate\Http\Response
*/
public function myform()
{
$states = DB::table("demo_state")->lists("name","id");
return view('myform',compact('states'));
}
/**
* Get Ajax Request and restun Data
*
* @return \Illuminate\Http\Response
*/
public function myformAjax($id)
{
$cities = DB::table("demo_cities")
->where("state_id",$id)
->lists("name","id");
return json_encode($cities);
}
}
Step 4: Add Blade File
In Last step, we should create myform.blade.php file in your resources directory that way we can write jquery code and layout. So, create new blade file from following path and put bellow code:
resources/view/myform.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Dependent Dropdown Example with demo</title>
<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Select State and get bellow Related City</div>
<div class="panel-body">
<div class="form-group">
<label for="title">Select State:</label>
<select name="state" class="form-control" style="width:350px">
<option value="">--- Select State ---</option>
@foreach ($states as $key => $value)
<option value="{{ $key }}">{{ $value }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="title">Select City:</label>
<select name="city" class="form-control" style="width:350px">
</select>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('select[name="state"]').on('change', function() {
var stateID = $(this).val();
if(stateID) {
$.ajax({
url: '/myform/ajax/'+stateID,
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="city"]').empty();
$.each(data, function(key, value) {
$('select[name="city"]').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
}else{
$('select[name="city"]').empty();
}
});
});
</script>
</body>
</html>
Ok, now you can run and check.....
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
- Laravel Livewire Datatables Example Tutorial
- Laravel Eloquent Delete Record By ID Example
- Laravel Eloquent whereNotNull() Query Example
- Laravel Livewire CRUD Application Tutorial
- Laravel Move File from One Folder to Another Example
- PHP - jquery ajax crop image before upload using croppie plugin
- Laravel 5 Ajax CRUD with Pagination example and demo from scratch
- How to use Login Throttle in Laravel?
- Laravel 5.2 API using JWT authentication tutorial from scratch example
- Laravel Where Clause with Mysql Function Example
- Laravel 5 import export to excel and csv using maatwebsite example.
