How to make simple dependent dropdown using jquery ajax in Laravel 5?

How to make simple dependent dropdown using jquery ajax in Laravel 5?

In this post we will give you information about How to make simple dependent dropdown using jquery ajax in Laravel 5?. Hear we will give you detail about How to make simple dependent dropdown using jquery ajax in Laravel 5?And how to use it also give you demo for it if it is necessary.

In this tutorial, I am going to do a simple dependent drop down list in Laravel 5 application using jquery ajax. In this simple example through we understand how to work dependent dropdown in laravel even if you beginner.

We sometimes require to make dependent dropdown like when state select at that time bellow city drop down list should change, i mean related to selected state. In this example i have two tables and there are listed bellow:

1.demo_state

2.demo_cities

So, when user will change state at that time, dynamically change city drop down box from database. you can implement this example in your application by follow bellow few step.

After complete bellow example, you will find layout as bellow:

Preview:

Step 1: Create Tables

In first step we have to create migration for demo_state and demo_cities tables using Laravel 5 php artisan command, so first fire bellow command:

php artisan make:migration create_state_city_tables

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 tables.

use IlluminateDatabaseSchemaBlueprint;

use IlluminateDatabaseMigrationsMigration;

class CreateStateCityTables extends Migration

{

public function up()

{

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

$table->increments('id');

$table->string('name');

$table->timestamps();

});


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

$table->increments('id');

$table->integer('state_id');

$table->string('name');

$table->timestamps();

});

}

public function down()

{

Schema::drop('demo_cities');

Schema::drop('demo_state');

}

}

After this migration, you should run migration using artisan command like as bellow:

php artisan migrate

Now, in your database, you will have two tables “demo_state” and “demo_cities”. Now we require to add some dummy data in both table like as bellow image.

demo_state

demo_cities

Step 2: Add Route

In this is step we need to create route two, one for layout and second for ajax request. so open your app/Http/routes.php file and add following route.

Route::get('myform',array('as'=>'myform','uses'=>'HomeController@myform'));

Route::get('myform/ajax/{id}',array('as'=>'myform.ajax','uses'=>'HomeController@myformAjax'));

Step 3: Add Controller Method

Ok, now we should create new controller as HomeController if you haven’t before in this path app/Http/Controllers/HomeController.php. this controller will manage layout and dynamic ajax data, so put bellow content in controller file:

app/Http/Controllers/HomeController.php

namespace AppHttpControllers;


use AppHttpRequests;

use IlluminateHttpRequest;

use DB;


class HomeController extends Controller

{


/**

* Show the application layout

*

* @return IlluminateHttpResponse

*/

public function myform()

{

$states = DB::table("demo_state")->lists("name","id");

return view('myform',compact('states'));

}


/**

* Get Ajax Request and restun Data

*

* @return IlluminateHttpResponse

*/

public function myformAjax($id)

{

$cities = DB::table("demo_cities")

->where("state_id",$id)

->lists("name","id");

return json_encode($cities);

}


}


Step 4: Add Blade File

In Last step, we should create myform.blade.php file in your resources directory that way we can write jquery code and layout. So, create new blade file from following path and put bellow code:

resources/view/myform.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel Dependent Dropdown Example with demo</title>

<script src="http://demo.onlinecode/plugin/jquery.js"></script>

<link rel="stylesheet" href="http://demo.onlinecode/plugin/bootstrap-3.min.css">

</head>

<body>


<div >

<div >

<div >Select State and get bellow Related City</div>

<div >

<div >

<label for="title">Select State:</label>

<select name="state" style="width:350px">

<option value="">--- Select State ---</option>

@foreach ($states as $key => $value)

<option value="{{ $key }}">{{ $value }}</option>

@endforeach

</select>

</div>

<div >

<label for="title">Select City:</label>

<select name="city" style="width:350px">

</select>

</div>

</div>

</div>

</div>


<script type="text/javascript">

$(document).ready(function() {

$('select[name="state"]').on('change', function() {

var stateID = $(this).val();

if(stateID) {

$.ajax({

url: '/myform/ajax/'+stateID,

type: "GET",

dataType: "json",

success:function(data) {


$('select[name="city"]').empty();

$.each(data, function(key, value) {

$('select[name="city"]').append('<option value="'+ key +'">'+ value +'</option>');

});


}

});

}else{

$('select[name="city"]').empty();

}

});

});

</script>


</body>

</html>

Ok, now you can run and check…..

Hope this code and post will helped you for implement How to make simple dependent dropdown using jquery ajax in Laravel 5?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

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

  +  79  =  81

We accept paid advance and paid guest Posting on our Site : Contact US