We noticed you're using an ad blocker

Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Laravel dependent dropdown

world cup 2023

WorldCup 2023

Get update standing, score, poll

Get Now

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.



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){

            $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.



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

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


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


                var id = $(this).val();

            category.change(function() {
                var id= $(this).val();

                            var s='<option value="">---select--</option>';
                                s +='<option value="'+row.id+'">'+row.name+'</option>'


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.

Share on

Related Post - Latest Post

Laravel Barcode generation tutorial

What's new in Laravel 9

Make laravel site super fast by page-cache!

Laravel maintenance mode bypass by Secret Route!

Laravel database backup automatically - cPanel shared hosting, VPS

Laravel Datatables - Ajax, Column, Buttons, Customization