Jquery How Do I Filter A Select Box List On The Client?

Laravel - Dynamic Dependant Select Box using JQuery Ajax Instance - Office 1

January 8, 2017 Category : 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 exist modify. We can't do this stuff without ajax.

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

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

In this example i created two tables as listed bellow:

1)countries

two)states

We perform, when nosotros select country from country dropdown, at that moment state dropdown box value will be change similar if i select "US" from country select box so in land select box value will be but "US" state.

And so, permit's follow blare few step to practice it.

Step 1 : Install Laravel Application

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

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

Step 2 : Database Configuration

In this step, nosotros crave to make database configuration, yous accept to add following details on your .env file.

one.Database Username

ii.Database Password

3.Database Name

In .env file also available host and port details, you can configure all details as in your organization, Then you lot can put like equally bellow:

.env

            DB_HOST=localhost
            DB_DATABASE=homestead
            DB_USERNAME=homestead
            DB_PASSWORD=secret

Step 3: Create countries and states Tables

In this stride nosotros accept to create migration for countries and states tabular array using Laravel 5.three php artisan command, so start fire bellow control:

php artisan brand:migration create_country_state_table

Afterwards this command you volition find i file in post-obit path database/migrations and you lot take to put blare lawmaking in your migration file for create categories table.

            <?php
            use Illuminate\Back up\Facades\Schema;
            use Illuminate\Database\Schema\Design;
            use Illuminate\Database\Migrations\Migration;
            class CreateCountryStateTable extends Migration
            {
                          /**
                          * Run the migrations.
                          *
                          * @return void
                          */
                          public function up()
                          {
                          Schema::create('countries', function (Blueprint $table) {
                          $tabular array->increments('id');
                          $tabular array->cord('proper noun');
                          $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('pour');
                          $table->timestamps();
                          });
                          }
                          /**
                          * Reverse the migrations.
                          *
                          * @render void
                          */
                          public function down()
                          {
                          Schema::drop("states");
                          Schema::drop("countries");
                          }
            }

Now nosotros crave 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 four: Create Route

In this is step we need to create route for class layout file and another one for ajax mail service asking. so open your routes/web.php file and add post-obit road.

routes/web.php

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

Ok Now we will see last two step in side by side folio, and so click on bellow button.

Hardik Savani

I'm a total-stack programmer, entrepreneur and owner of Aatman Infotech. I alive in Bharat and I honey to write tutorials and tips that can help to other artisan. I am a large fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.

Follow Me: