ItSolutionStuff.com

Laravel - Dynamic Dependant Select Box using JQuery Ajax Example - Part 1

By Hardik Savani • April 16, 2024
PHP Laravel Bootstrap jQuery MySql Ajax

In this Tutorial, I am going to share with you how to make dynamic dependent dropdown box using Ajax like When i select category, then sub category select box value should be change. We can't do this stuff without ajax.

let's see dynamic dependant select dropdown using jquery ajax in laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 app.

So, in this Post i am going to give you full and very simple example of dynamic select box using change event of jquery. This article written in two parts, so it can be easy to understand and if you are beginner then also you can simply perform because this tutorial is from scratch.

In this example i created two tables as listed bellow:

1)countries

2)states

We perform, when we select country from country dropdown, at that moment state dropdown box value will be change like if i select "US" from country select box then in state select box value will be only "US" state.

So, let's follow bellow few step to do it.

Step 1 : Install Laravel Application

we are going from scratch, So we require to get fresh Laravel application using bellow command, So open your terminal OR command prompt and run bellow command:

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

Step 2 : Database Configuration

In this step, we require to make database configuration, you have to add following details on your .env file.

1.Database Username

2.Database Password

3.Database Name

In .env file also available host and port details, you can configure all details as in your system, So you can put like as bellow:

.env

DB_HOST=localhost

DB_DATABASE=homestead

DB_USERNAME=homestead

DB_PASSWORD=secret

Step 3: Create countries and states Tables

In this step we have to create migration for countries and states table using Laravel 5.3 php artisan command, so first fire bellow command:

php artisan make:migration create_country_state_table

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create categories table.

<?php


use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;


class CreateCountryStateTable extends Migration

{

/**

* Run the migrations.

*

* @return void

*/

public function up()

{

Schema::create('countries', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->timestamps();

});


Schema::create('states', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->integer('id_country')->unsigned();

$table->foreign('id_country')->references('id')->on('countries')->onDelete('cascade');

$table->timestamps();

});

}


/**

* Reverse the migrations.

*

* @return void

*/

public function down()

{

Schema::drop("states");

Schema::drop("countries");

}

}

Now we require to run migration be bellow command:

php artisan migrate

After create "countries" and "states" tables, we should have some dummy data for testing, So make sure that.

Step 4: Create Route

In this is step we need to create route for form layout file and another one for ajax post request. so open your routes/web.php file and add following route.

routes/web.php

Route::get('myform', 'AjaxDemoController@myform');

Route::post('select-ajax', ['as'=>'select-ajax','uses'=>'AjaxDemoController@selectAjax']);

Ok Now we will see last two step in next page, so click on bellow button.


Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Laravel Google ReCaptcha V2 Example Tutorial

Read Now →

How to Generate QR Code in Laravel?

Read Now →

Laravel Get Next and Previous Record with URL Example

Read Now →

How to Use Alpine JS with Laravel?

Read Now →

Laravel Blade Isset Else Example

Read Now →

Laravel Livewire Sweetalert Example

Read Now →

Laravel PHP json_decode without quotes Example

Read Now →

Laravel Carbon Get Last Day of Month Example

Read Now →

How to Compare Two Dates in Laravel Carbon?

Read Now →

Laravel Carbon Check If Date is Greater Than Other Date

Read Now →

Laravel Carbon Get Tomorrow Date Example

Read Now →

Laravel Carbon Subtract Seconds Example

Read Now →

Laravel - Dynamic Dependant Select Box using JQuery Ajax Example - Part 2

Read Now →

Laravel Category Treeview Hierarchical Structure Example

Read Now →

Laravel Google reCaptcha using anhskohbo/no-captcha Example

Read Now →