JQuery Ajax Dynamic Dependent Dropdown In Laravel

Hey Artisan

Today i am going to discuss about a brand new topic which is how to make simple dependent dropdown using jquery ajax in Laravel 8. In this tutorial you will learn laravel dynamic dependent dropdown using ajax. 

I will use a Category table to show you laravel jquery ajax categories and subcategories select dropdown. Many developer create subcategory table also to do it. But no need to create sub category.

I will create a category table which contains two field one is category name and other is parent_id. By using paren_id we will find out all subcategories from a category.

I will make a self relationship within the category table to show you laravel jquery ajax categories and subcategories select dropdown menu item. Let's see how we can make it.

Preview : before selecting category


Preview : after selecting category


Preview : after selecting category


Now let's start our example fetch data from database in dropdownlist in laravel onchange ajax jquery in laravel 7 tutorial. 


Step 1: Create Category Model

Now we need a category model to get category and dependent subcategory using ajax. So run below command to create it

php artisan make:model Category -m


After doing it, open the newly created migration file and paste the following code.

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

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

     * Reverse the migrations.
     * @return void
    public function down()


Now open Category model to make a self relationship. 


namespace App;

use Illuminate\Database\Eloquent\Model;

class Category extends Model
    protected $guarded = [];

    public function subcategories(){

        return $this->hasMany('App\Category', 'parent_id');



Now run the below command to migrate category model.

php artisan migrate


After doing all of the above things, you need to insert some dummy data to create our laravel 7 dependent dropdown example with demo tutorial. So make it like below



Step 2:  Create Route

Here we need two routes. from one route we will see our blade view and from another route we will send our ajax request to the server. 


use App\Category;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {

    $categoris = Category::where('parent_id',0)->get();
    return view('welcome',["categoris" => $categoris]);


Route::post('/subcat', function (Request $request) {

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

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


Read also : Create API Authentication using Laravel Passport


Step 3: Create Blade File

We are in the last step. So create welcome.blade.php and paste this below code. Here we will write our jquery code and we will send ajax request from this file.



Now you can check it after doing all of those above things. Hope it can help you.


#ajax #ajax-request #jquery #dropdown-menu #laravel-5 #laravel-6 #laravel-7 #laravel #demo #example #source-code