If you are a Laravel developer then you will face a problem like click category show subcategory or click country and show state like that. This scenario is called a dynamic-dependent dropdown. We can easily create this Laravel-dependent dropdown using Ajax request. So this tutorial is going to show you how to create a dependent dropdown list in Laravel 10 using ajax.

In this tutorial, I will show you the dependent dropdown in Laravel 10 with Laravel jquery Ajax categories and subcategories select dropdown example. I will use parent_id to find out which is a subcategory and which is the parent category. Using category and subcategory, I will create this show subcategory by selecting the category Laravel using Ajax request.

Let's start the tutorial of dynamic dependent dropdown in Laravel 10 using jquery Ajax. I will use Laravel 10 version to create this dynamic-dependent dropdown example in Laravel.


Step 1: Download Fresh Laravel

In the first step of dynamic category and subcategory in Laravel example, download a fresh Laravel application by the following command:

composer create-project laravel/laravel example-app


Step 2: Create Model

In this second step, we need to create migration for the categories table using artisan command, so first fire bellow command:

php artisan make:model Category-m


Now update the Category model and migrations file.



namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;

class Category extends Model implements Auditable
    use HasFactory;

    protected $guarded = [];

    public function subcategories(){
        return $this->hasMany('App\Category', 'parent_id');



Now update the migrations


use App\Models\Doctor;
use App\Models\Patient;
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
     * Run the migrations.
    public function up(): void
        Schema::create('categories', function (Blueprint $table) {

     * Reverse the migrations.
    public function down(): void


Step 3: Connect database

In this step, we will connect the database, and I am going to use MySQL. So connect it like the below by updating the .env file:




Now run the below command to generate a categories table:

php artisan migrate


Step 4:  Create Route

Now in this step, create a route like the one below to complete the category subcategory dropdown in the Laravel tutorial. I am going to use an Ajax request. So we can create this laravel dependent dropdown Ajax.



use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CategoryController;

| Web Routes
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!

Route::controller(CategoryController::class)->group(function () {
    Route::get('/', 'index');
    Route::post('/subcat', 'show')->name('subcat');


Step 5: Create Controller

Now we have to create CategoryController to complete dependent dropdown in laravel 10. So run the below command to create a controller:

php artisan make:controller CategoryController


Now update this controller like this:



namespace App\Http\Controllers;

use App\Models\Event;
use Illuminate\Http\Request;

class EventController extends Controller
    public function index(Request $request)
        $categoris = Category::where('parent_id',0)->get();
        return view('welcome',["categoris" => $categoris]);

    public function show(Request $request)
        $parent_id = $request->cat_id;
        $subcategories = Category::where('id',$parent_id)

        return response()->json([
            'subcategories' => $subcategories


Step 6: Create Views

In this final step, we have to create an HTML form. So create it in the following path and update it like this:


<html lang="{{ app()->getLocale() }}">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel 10 Dynamic Dependent Dropdown Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <div class="container" style="margin-top: 50px; margin-left: 300px">
        <div class="row">
            <div class="col-lg-6">
                <form action="">
                    <select class="browser-default custom-select" name="category" id="category">
                        <option selected>Select category</option>
                        @foreach ($categoris as $item)
                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                    <select class="browser-default custom-select" name="subcategory" id="subcategory">


    <script type="text/javascript">
        $(document).ready(function() {
            $('#category').on('change', function(e) {
                var cat_id = e.target.value;
                    url: "{{ route('subcat') }}",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    data: {
                        cat_id: cat_id
                    success: function(data) {
                        $.each(data.subcategories[0].subcategories, function(index,
                        subcategory) {
                            $('#subcategory').append('<option value="' + subcategory
                                .id + '">' + subcategory.name + '</option>');


Read also:  Laravel 10 Calendar Events With Ajax Tutorial



After completing this dynamic category and subcategory in laravel tutorial, hope now you know how to show subcategory by select category laravel. Hope this dependent dropdown in laravel 10 tutorial will help you.

Category : #laravel

Tags : #laravel , #laravel ajax