Laravel 9 Dynamic Dependent Dropdown Using jQuery Ajax

Laravel 9 Dynamic Dependent Dropdown Using jQuery Ajax

Laravel 9 dynamic dependent dropdown using ajax jquery; In this tutorial, we will learn how to implement dynamic dependent dropdown using jquery ajax in laravel 9 apps.

The dynamic dependent select box is used to automatically add dependent data to the dropdown list. Based on the dropdown options, the dependent data is retrieved from the database and displayed in the next select option field

And as well as will guide on how to show selected subcategories dependent dropdown on selected category dropdown using jquery ajax in laravel 9 app.

Laravel 9 AJAX Dynamic Dependent Category and Subcategory Dropdown Example

Use the following steps to implement dynamic category and subcategory dependent dropdown using jQuery ajax in laravel 9 apps:

  • Step 1 – Install Laravel 9 App
  • Step 2 – Connecting App to Database
  • Step 3 – Create Model and Migration
  • Step 4 – Add Routes
  • Step 5 – Create Controllers By Artisan
  • Step 6 – Create Blade Views
  • Step 7 – Run Development Server
  • Step 8 – Test This App

Step 1 – Install Laravel 9 App

First of all, Execute the following command on terminal to download or install laravel 9 fresh new setup:

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

Step 2 – Connecting App to Database

After that, open “.env” file and update the database name, username, and password in the env file:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

Step 3 – Create Modal and Migration

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

php artisan make:model Category -m

Navigate database/migrations/ and open create_categorys_table.php file. Then update the following code into this file:

    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->unsignedInteger('parent_id')->nullable();
            $table->timestamps();
        });
    }
   

Now run the following command

php artisan migrate

Next, open Category.php model file and update the following code into it, which is placed on app/Models/:

<?php

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\Category', 'parent_id');
    }
}

Step 4 – Add Routes

Next step, Navigate to “routes/web.php” file and add the following routes into 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

Next step, execute the following command on the terminal to create a controller file that named CategoryController:

php artisan make:controller CategoryController 

This command will create CategoryController by the artisan command.

Next, Navigate to app/http/controller and open CategoryController.php.Then update the following methods into your controller file:

<?php
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)
                              ->with('subcategories')
                              ->get();
        return response()->json([
            'subcategories' => $subcategories
        ]);
    }
}

Step 6 – Create Blade Views

In this step, create one blade views file for rendering data on it. So navigate to resources/views folder and create the blade view as following:

Create first file name category.blade.php and update the following code into it:

<html lang="{{ app()->getLocale() }}">
    <head>
        <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 9 jquery ajax categories and subcategories, select dropdown</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() }}" />
    </head>
    <body>
        <div class="container" style="margin-top: 50px; margin-left: 300px">
            <div class="row">
                <div class="col-lg-6">
                    <form action="">
                        <h4>Category</h4>
                        <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>
                            @endforeach
                        </select>
                      
                        <h4>Subcategory</h4>
                        <select class="browser-default custom-select" name="subcategory" id="subcategory">
                           
                        </select>
                    </form>
                                  
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $(document).ready(function () {
             
                $('#category').on('change',function(e) {
                 
                 var cat_id = e.target.value;
                 $.ajax({
                       
                       url:"{{ route('subcat') }}",
                       type:"POST",
                       data: {
                           cat_id: cat_id
                        },
                      
                       success:function (data) {
                        $('#subcategory').empty();
                        $.each(data.subcategories[0].subcategories,function(index,subcategory){
                            
                            $('#subcategory').append('<option value="'+subcategory.id+'">'+subcategory.name+'</option>');
                        })
                       }
                   })
                });
            });
        </script>
    </body>
</html> 

Step 7 – Run Development Server

In this step, use the following PHP artisan serve command to start your server locally:

php artisan serve

Step 8 – Test This App

Now, open a browser and hit the following URL on it to test this app:

http://localhost:8000/cat

Conclusion

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

Recommended Laravel Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of 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 from a starting stage. As well as demo example.

Leave a Reply

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