Laravel dependent dropdown

In laravel web application development the dependent/cascading dropdown is an important part. For example, if you have 2 levelled category data in your category table like category and subcategory and you wanted to load subcategory depending on main category select. So here subcategory depends on the main category. In this post, I'll teach you practically step by step process for how to make a dependent dropdown in Laravel application. Here I'll use Laravel 6 but you can try with your existing laravel project also. According to this post, you can make country, city dependent dropdown also. So let's start.

Our table name categories and fields id, name, parent_id. If category main then parent_id will be zero and for subcategory, parent_id will be the parent category id. Like

id   name       parent_id
------------------------
1    Book       0
2    Text Book  1
3    Novel      1

Step-01: Define Route

Add 2 routes in the route file. One for returning a view for dropdown and another for JSON API.

Route::get('/dropdown','DropdownController@index');
Route::get('/dropdown-data','DropdownController@data');

Step-02: Make Dropdown Controller

Make a controller for rendering dropdown view and making API for dependent dropdown ajax request.

php artisan make:controller DropdownController

Now code in DropdownController for making dependent dropdown.

<?php namespace App\Http\Controllers;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Category;

class DropdownController extends Controller
{

    public function index()
    {
        $categories = Category::where('parent_id',0)->get();
        return view('dropdown',compact('categories'));
    }

    public function data(Request $request){

        if($request->has('cat_id')){
            $parentId = $request->get('cat_id');
            $data = Category::where('parent_id',$parentId)->get();
            return ['success'=>true,'data'=>$data];
        }

    }

}

Step-03: Make dropdown view

Make a dropdown.blade.php file inside your resource/views folder. If you did not include jQuery in your project then include jQuery first.

@extends('app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <h3>Dependent Dropdown</h3>
                <hr>
                <div class="form-group">
                    <label>Category</label>
                    <select class="form-control input-sm" name="category_id">
                        <option value="">--select--</option>
                        @foreach ($categories as $row)
                            <option value="{{$row->id}}">{{$row->name}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group" style="position:relative">
                    <label>Sub-Category</label>
                    <select class="form-control input-sm" name="subcategory_id"></select>
                    <img id="loader" src="{{url('/images/ajax-loader.gif')}}" alt="loader">
                </div>

            </div>
        </div>
    </div>

    <style>
        #loader {
            position: absolute;
            right: 18px;
            top: 30px;
            width: 20px;
        }
    </style>
    <script>
        $(function () {
            var loader = $('#loader'),
                category = $('select[name="category_id"]'),
                subcategory = $('select[name="subcategory_id"]');

            loader.hide();
            subcategory.attr('disabled','disabled')

            subcategory.change(function(){
                var id = $(this).val();
                if(!id){
                    subcategory.attr('disabled','disabled')
                }
            })

            category.change(function() {
                var id= $(this).val();
                if(id){
                    loader.show();
                    subcategory.attr('disabled','disabled')

                    $.get('{{url('/dropdown-data?cat_id=')}}'+id)
                        .success(function(data){
                            var s='<option value="">---select--</option>';
                            data.forEach(function(row){
                                s +='<option value="'+row.id+'">'+row.name+'</option>'
                            })
                            subcategory.removeAttr('disabled')
                            subcategory.html(s);
                            loader.hide();
                        })
                }

            })
        })
    </script>
@endsection​

In the loader, I have used a gif image for listening to the Ajax request-response. If you can do these are correct then you will get a functional dependent dropdown in your laravel application looks like below.

Hope this post will help you to make dependent or cascading dropdown in your laravel application. If you find this post is helpful then please share with others.