Laravel 10 Dynamic Category SubCategory Dependent Dropdown

Laravel 10 Dynamic Category SubCategory Dependent Dropdown

To create a dynamic category and subcategories dependent dropdown in Laravel 10 using jQuery and Ajax; Simply create a Laravel app and then create dropdown using jQuery and ajax, and populate subcategories based on the select category in the dependent dropdown from database.

Laravel 10 Dynamic Category SubCategory Dependent Dropdown

Steps to create a dynamic category and subcategory dependent dropdown using jQuery ajax in laravel apps:

Step 1 – Create New Laravel 10 Project

Firstly, Open your terminal or command prompt.

Then execute the following command on the terminal to download or install Laravel 10 fresh new setup:

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

Step 2 – Setup Database with Laravel Project

In this step, visit your laravel app root directory and find the .env file.

Then configure database details in the .evn file, like the following:


Step 3 – Create Migration and Model File

In this step, create category table migration and create category Modal by using the following command:

php artisan make:model Category -m

After that, you need to visit the database/migrations/ directory and then open the create_categorys_table.php file. And add the following code into this file:

    public function up()
        Schema::create('categories', function (Blueprint $table) {

Now run the following command on the terminal to create tables on database:

php artisan migrate

Then visit the app/Models directory and open the Category.php model file. And then add the following code into it:


namespace App\Models;

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

class Category extends Model
    use HasFactory;

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

Step 4 – Add Routes

Now, Visit to routes directory and open “/web.php” file. Then add the following routes to your web.php file:

use App\Http\Controllers\CategoryController;

Route::get('cat', [CategoryController::class, 'index']);
Route::post('subcat', [CategoryController::class, 'subCat']);

Step 5 – Create Controllers by Artisan

To create a controller file named CategoryController by running the php artisan make:controller CategoryController on cmd or terminal window:

php artisan make:controller CategoryController 

This command will create CategoryController by the artisan command.

Then visit to app/http/controller directory and open CategoryController.php. Then update the following methods into your controller file:

namespace App\Http\Controllers;
use App\Models\Category;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
class CategoryController extends Controller
    public function index(Request $request)
      $categoris = Category::where('parent_id',0)->get();
      return view('category',["categoris" => $categoris]);
    public function subCat(Request $request)
        $parent_id = $request->cat_id;
        $subcategories = Category::where('id',$parent_id)
        return response()->json([
            'subcategories' => $subcategories

Step 6 – Create Blade Views

To create one blade views file for populate subcategories based on select category in dependent dropdown from database.

Simply navigate to resources/views folder and create file name category.blade.php and update the following code into it:

<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 jquery ajax categories and subcategories, select dropdown</title>
        <script src=""></script>
        <link href="" 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">
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            $(document).ready(function () {
                $('#category').on('change',function(e) {
                 var cat_id =;
                       url:"{{ route('subcat') }}",
                       data: {
                           cat_id: cat_id
                       success:function (data) {
                            $('#subcategory').append('<option value="''">''</option>');

Step 7 – Run Development Server

In this step, Execute the following php artisan serve command to start your server locally:

php artisan serve

Step 8 – Test This App

Now, open browser and hit the following url on it for test this app:



In this tutorial, you have learned how to create dynamic dependent dropdown using Ajax in Laravel 10 app.

Recommended Laravel Posts


Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *