Laravel Dependent Dropdown Tutorial With Example

Hello developers, Under this example, 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 dependent dropdown. You can find more about http request here.

Laravel Dependent Dropdown Tutorial With Example

We are going to Configure Laravel Project.

#1: Download Laravel Project

Establish Laravel Project by the typing following command.

composer create-project --prefer-dist laravel/laravel laraveldropdown

#2: Configure SQL Database

Now we can setup database credentials.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldropdown
DB_USERNAME=root
DB_PASSWORD=

#3: Build Migration File

Here we will create two tables like country and state. First, create a country table so type following command in terminal.

php artisan make:migration create_countries_table --create=countries

It will create a create_countries_table.php migration file.

//create_countries_table.php

public function up()
    {
        Schema::create('countries', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

Here we add manually data in a database create_countries_table you can see below screenshot.

Next, create a state table so type following command in terminal.

php artisan make:migration create_states_table --create=states

It will create a create_states_table.php migration file.

//create_states_table

public function up()
    {
        Schema::create('states', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('countries_id');
            $table->string('name');
            $table->timestamps();
        });
    }

Here we add manually data in a database create_states_table you can see below screenshot.

#4: Create one controller

php artisan make:controller DataController

It will build a controller file called DataController.php.

Add following code into DataController.php file.

//DataController.php

use DB;

public function getCountries()
    {
        $countries = DB::table('countries')->pluck("name","id");
        return view('dropdown',compact('countries'));
    }

Here we create a method called getCountries(). This method returns all countries which we have included in the table. So pass countries to view file.

#5: Create a View File.

Create a file in resources/views/dropdown.blade.php and put this following code in it.

<!-- dropdown.blade.php -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Laravel Dependent Dropdown  Tutorial With Example</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
  </head>
  <body>
    <div class="container">
    <h2>Laravel Dependent Dropdown  Tutorial With Example</h2>
            <div class="form-group">
                <label for="country">Select Country:</label>
                <select name="country" class="form-control" style="width:250px">
                    <option value="">--- Select Country ---</option>
                    @foreach ($countries as $key => $value)
                    <option value="{{ $key }}">{{ $value }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label for="state">Select State:</label>
                <select name="state" class="form-control"style="width:250px">
                <option>--State--</option>
                </select>
            </div>
      </div>
  </body>
</html>

#6: Define Route

We register all route in a web.php file.

//web.php

Route::get('dropdownlist','DataController@getCountries');
Route::get('dropdownlist/getstates/{id}','DataController@getStates');

You can see the screenshot when you change the country state doesn’t change because still we have not added the jQuery so next step will add jQuery code in the dropdown.blade.php file so let’s add.

#7: Add jQuery Code

<!-- dropdown.blade.php -->

<script type="text/javascript">
    jQuery(document).ready(function ()
    {
            jQuery('select[name="country"]').on('change',function(){
               var countryID = jQuery(this).val();
               if(countryID)
               {
                  jQuery.ajax({
                     url : 'dropdownlist/getstates/' +countryID,
                     type : "GET",
                     dataType : "json",
                     success:function(data)
                     {
                        console.log(data);
                        jQuery('select[name="state"]').empty();
                        jQuery.each(data, function(key,value){
                           $('select[name="state"]').append('<option value="'+ key +'">'+ value +'</option>');
                        });
                     }
                  });
               }
               else
               {
                  $('select[name="state"]').empty();
               }
            });
    });
    </script>

Final code of dropdown.blade.php looks like below code.

<!-- dropdown.blade.php -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Laravel Dependent Dropdown  Tutorial With Example</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
  </head>
  <body>
    <div class="container">
    <h2>Laravel Dependent Dropdown  Tutorial With Example</h2>
            <div class="form-group">
                <label for="country">Select Country:</label>
                <select name="country" class="form-control" style="width:250px">
                    <option value="">--- Select Country ---</option>
                    @foreach ($countries as $key => $value)
                    <option value="{{ $key }}">{{ $value }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label for="state">Select State:</label>
                <select name="state" class="form-control"style="width:250px">
                <option>--State--</option>
                </select>
            </div>
      </div>
    <script type="text/javascript">
    jQuery(document).ready(function ()
    {
            jQuery('select[name="country"]').on('change',function(){
               var countryID = jQuery(this).val();
               if(countryID)
               {
                  jQuery.ajax({
                     url : 'dropdownlist/getstates/' +countryID,
                     type : "GET",
                     dataType : "json",
                     success:function(data)
                     {
                        console.log(data);
                        jQuery('select[name="state"]').empty();
                        jQuery.each(data, function(key,value){
                           $('select[name="state"]').append('<option value="'+ key +'">'+ value +'</option>');
                        });
                     }
                  });
               }
               else
               {
                  $('select[name="state"]').empty();
               }
            });
    });
    </script>
  </body>
</html>

Add following code into DataController.php file.

//DataController.php


public function getStates($id) 
{        
        $states = DB::table("states")->where("countries_id",$id)->pluck("name","id");
        return json_encode($states);
}

Final Code of DataController.php looks like below code.

//DataController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class DataController extends Controller
{
    public function getCountries()
    {
        $countries = DB::table('countries')->pluck("name","id");
        return view('dropdown',compact('countries'));
    }

    public function getStates($id) 
    {
        $states = DB::table("states")->where("countries_id",$id)->pluck("name","id");
        return json_encode($states);
    }
}

At last, our Laravel Dependent Dropdown Tutorial With Example is over.

Krunal Lathiya

Krunal Lathiya is an Information Technology Engineer by education and web developer by profession. He has worked with many back-end platforms, including Node.js, PHP, and Python. In addition, Krunal has excellent knowledge of cloud technologies including Google Cloud, Firebase, AWS, and Azure, and various softwares and tools.

14 thoughts on “Laravel Dependent Dropdown Tutorial With Example”

simo

October 23, 2018 at 7:31 AM

hi i’m a new b in laravel and ajax and i would like to thank u very much for this very helpful tutorial
lll

March 11, 2019 at 6:55 AM

hey, great post, but what would be the jquery alternative in vanilla js?
Jeferson

March 29, 2019 at 2:13 PM

Cheers from Brasil!
Your code is the only one that works@
Thanks!
Rss

May 5, 2019 at 6:29 PM

How do you render the content for editing?
I tried it and it worked, but when I tried to edit the record, value from the dropdown fields do not show. Thanks
abobo

December 25, 2019 at 5:15 AM

Thanks for sharing the information
what I noticed is that the value did not save to sql database it only save the id to sql
kindly assist with brief explanation on how to save value instead of ID.
Pradip Katare

February 6, 2020 at 5:00 AM

App\DB’ not found
- ndr3svt
  
  June 2, 2021 at 6:25 AM
  
  this is from a year ago, but maybe helps someone in the future
  
  you need to add this before the class definition on the DataController.php
  
  use IlluminateSupportFacadesDB;
mark

February 6, 2020 at 5:24 PM

hOW do you redisplay a previously selected value on the dependant select. ie if the form fails validation?
George

July 25, 2020 at 7:32 AM

HI
HOW Do you manage it if you have also the “City”-Dropdown menu? I tried to expand your improves to three Menus but it doesn’t work anymore. Thank you for your Help
Sanchezz2

February 16, 2021 at 12:45 PM

I have

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class DataController extends Controller
{
//
}

Where i must paste that code ?
- ndr3svt
  
  June 2, 2021 at 6:26 AM
  
  Inside the DataController class definition:
  
  class DataController extends Controller{
  // your code goes here 🙂
  }
Erik Espinosa

August 30, 2021 at 6:49 PM

Amazing post. Works on Laravel 8 with jQuery 3.

Greeting from Mexico City!
Sychan

December 22, 2021 at 10:28 PM

How can I use with resource Controller?
Sychan

December 22, 2021 at 10:28 PM

How can I use with resource Controller,Plz?