Laravel Dynamic Dependent Dropdown Example

By Hardik Savani August 16, 2016 Category : Laravel jQuery Ajax

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, laravel 8 and laravel 9 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'=>'HomeController@myform'));
Route::get('myform/ajax/{id}',array('as'=>'myform.ajax','uses'=>'HomeController@myformAjax'));

Read Also: Laravel 5 import export to excel and csv using maatwebsite example.

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

Read Also: Laravel Model Events Tutorial
<!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.....

Tags :

We are Recommending you

Popular Posts

Categories

Latest Posts