How to make simple dependent dropdown using jquery ajax in Laravel 5?
In this tutorial, I am going to do a simple dependent drop down list in Laravel 5 application using jquery ajax. In this simple example through we understand how to work dependent dropdown in laravel even if you beginner.
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.
