In this tutorial you will learn about the Laravel 9 Dynamic Dependent Dropdown Using jQuery Ajax and its application with practical example.
In this Laravel 9 Dynamic Dependent Dropdown Using jQuery Ajax tutorial I’ll show you how to implement dependent categories and subcategories dropdown in laravel 9 using jQuery ajax. In this tutorial you will learn to create categories and subcategories dropdown using jquery ajax in laravel 9. In this article I will share example to create Dynamic Dependent Dropdown Using jQuery Ajax In Laravel 9. We will be creating an example of categories and subcategories dropdown using jquery ajax in laravel 9.
Laravel 9 Dynamic Dependent Dropdown Using jQuery Ajax
In this step by step tutorial I will demonstrate you creating a Dynamic Dependent Dropdown using jquery ajax in laravel 9. Please follow the instruction given below:
- Install Laravel 9
- Connecting App to Database
- Create Model and Migration
- Add Routes
- Create Controllers By Artisan
- Create Blade Views
- Run Development Server
- Test This App
Install Laravel 8 App
First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command
|
1 |
composer create-project --prefer-dist laravel/laravel blog |
Connecting App to Database
Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.
|
1 2 3 4 5 6 |
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 |
Create Modal and Migration
Now, in this step we will create model and migration file. Please run the following command:
|
1 |
php artisan make:model Category -m |
Now go to database/migrations/ and open create_categorys_table.php file. Then put the following code into this file:
|
1 2 3 4 5 6 7 8 9 |
public function up() { Schema::create('categories', function (Blueprint $table) { $table->id(); $table->string('name'); $table->unsignedInteger('parent_id')->nullable(); $table->timestamps(); }); } |
Now, run the migration to create database table using following artisan command:
|
1 |
php artisan migrate |
Now, open Category.php model file and put the following code into it:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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'); } } |
Add Routes
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 2 3 4 |
use App\Http\Controllers\CategoryController; Route::get('cat', [CategoryController::class, 'index']); Route::post('subcat', [CategoryController::class, 'subCat']); |
Create Controllers by Artisan
Now, lets create a controller named CategoryController using command given below –
|
1 |
php artisan make:controller CategoryController |
Go to app/http/controller and open CategoryController.php.Then put the following code into your controller file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?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 ]); } } |
Create Blade Views
In this step we will create ablade view file. Go to resources/views folder and create the blade view as following.
category.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<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> |
Run Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
|
1 |
http://localhost:8000/cat |
