Automatic dropdown box loading using Laravel and Jquery/Ajax

Below are the files required for dropdown box loading based on another dropdown selection.Here if we
select one country dropdown, then state dropdown will load automaticaly.

Routes,Models,view,controller files are listed below

Routes.php

<?php
Route::get('/', function () {
    return view('welcome');
});
Route::get('dropdown', 'WelcomeController@dropdown');
Route::post('getStateUsingCountryId', 'WelcomeController@getStateUsingCountryId');

?>

<?php

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

return view('welcome');

});

Route::get('dropdown', 'WelcomeController@dropdown');

Route::post('getStateUsingCountryId', 'WelcomeController@getStateUsingCountryId');

view file will be in the resource folder views/dropdown/drodown.blade.php

<html>
	<head>
		<title>Automatic dropdown</title>
		<meta name="csrf-token" content="{{ csrf_token() }}" />
		<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>

		<style>
			body {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
				color: #B0BEC5;
				display: table;
				font-weight: 100;
				font-family: 'Lato';
			}

			.container {
				text-align: center;
				display: table-cell;
				vertical-align: middle;
			}

			.content {
				text-align: center;
				display: inline-block;
			}

			.title {
				font-size: 96px;
				margin-bottom: 40px;
			}

			.quote {
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="content">
				<div class="title">Automatic dropdown in laravel</div>
				 <div class="form-group">                        
                    {!! Form::select('country', (['' => $placeholder_country] + $country),null,['id'=>'country','class'=>'form-control','onchange'=>'display_state()']) !!}
                    <span id="states_error"></span>
                </div>   
				 <div class="form-group">      
				<select name="state" id="state" class="form-control state_display_box " style="clear:both">
                                    <option value="">Select State</option>
									</select>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
function display_state(){     
var siteUrl ='{{url("getStateUsingCountryId")}}';
  
        var country_id = $('#country').val();
        
        if (country_id == "") {
            $('.state_display_box').html('');
            $('.state_display_box').html('<option value="">Select State</option>');
        } else {
            var dataString = 'country_id='+country_id;
            $.ajax({
                url: siteUrl,
                async: true,
                type: "POST",
                data: dataString,
                dataType: "html",
                beforeSend: function(){
                    $('.state_display_box').html("<option>Please wait, state is loading... </option>");
                },
                success: function (data) { 
                    $('.state_display_box').html('');
                    $('.state_display_box').html(data);
                }
            });
        }
    }
	
</script>

<html>

<head>

<title>Automatic dropdown</title>

<style>

body {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

color: #B0BEC5;

display: table;

font-weight: 100;

font-family: 'Lato';

}

.container {

text-align: center;

display: table-cell;

vertical-align: middle;

}

.content {

text-align: center;

display: inline-block;

}

.title {

font-size: 96px;

margin-bottom: 40px;

}

.quote {

font-size: 24px;

}

</style>

</head>

<body>

<div class="title">Automatic dropdown in laravel</div>

{!! Form::select('country', (['' => $placeholder_country] + $country),null,['id'=>'country','class'=>'form-control','onchange'=>'display_state()']) !!}

</div>

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

</select>

</div>

</body>

</html>

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

function display_state(){

var siteUrl ='{{url("getStateUsingCountryId")}}';

var country_id = $('#country').val();

if (country_id == "") {

$('.state_display_box').html('');

$('.state_display_box').html('<option value="">Select State</option>');

} else {

var dataString = 'country_id='+country_id;

$.ajax({

url: siteUrl,

async: true,

type: "POST",

data: dataString,

dataType: "html",

beforeSend: function(){

$('.state_display_box').html("<option>Please wait, state is loading... </option>");

success: function (data) {

$('.state_display_box').html('');

$('.state_display_box').html(data);

}

});

}

</script>

here i used the controller named welcomecontroller

<?

php namespace App\Http\Controllers;
use App\Models\Country;
use App\Models\State;
use Illuminate\Http\Request;
class WelcomeController extends Controller {

	/*
	|--------------------------------------------------------------------------
	| Welcome Controller
	|--------------------------------------------------------------------------
	|
	| This controller renders the "marketing page" for the application and
	| is configured to only allow guests. Like most of the other sample
	| controllers, you are free to modify or remove it as you desire.
	|
	*/

	/**
	 * Create a new controller instance.
	 *
	 * @return void
	 */
	public function __construct()
	{
		$this->middleware('guest');
	}

	/**
	 * Show the application welcome screen to the user.
	 *
	 * @return Response
	 */
	public function index()
	{
		return view('welcome');
	}

	public function contactf()
	{
	 	return view('pages.contact');
	
	}
	
	public function dropdown()
	{
		$data['placeholder_country'] = 'Select Country *';
	    $data['country'] = Country::getCountries()->toArray();
				return view('dropdown.dropdown',$data);
	}

	
	public function getStateUsingCountryId(Request $request) {
        $country_id = $request->input('country_id');
        $stateDetails = State::getState($country_id);

        $state_drop_down = '<option value="">Select State</option>';
        foreach ($stateDetails as $key=>$value) {


              

                $state_drop_down .= '<option value="' . $key . '">' . $value. '</option>';
            }
			 echo $state_drop_down;
        }
  	
}
?>

php namespace App\Http\Controllers;

use App\Models\Country;

use App\Models\State;

use Illuminate\Http\Request;

class WelcomeController extends Controller {

|--------------------------------------------------------------------------

| Welcome Controller

|--------------------------------------------------------------------------

| This controller renders the "marketing page" for the application and

| is configured to only allow guests. Like most of the other sample

| controllers, you are free to modify or remove it as you desire.

/**

* Create a new controller instance.

* @return void

public function __construct()

{

$this->middleware('guest');

}

/**

* Show the application welcome screen to the user.

* @return Response

public function index()

{

return view('welcome');

}

public function contactf()

{

return view('pages.contact');

}

public function dropdown()

{

$data['placeholder_country'] = 'Select Country *';

$data['country'] = Country::getCountries()->toArray();

return view('dropdown.dropdown',$data);

}

public function getStateUsingCountryId(Request $request) {

$country_id = $request->input('country_id');

$stateDetails = State::getState($country_id);

$state_drop_down = '<option value="">Select State</option>';

foreach ($stateDetails as $key=>$value) {

$state_drop_down .= '<option value="' . $key . '">' . $value. '</option>';

}

echo $state_drop_down;

}

Models Files are..

Country.php,State.php

<?php namespace App;
namespace App\Models;
use Illuminate\Database\Eloquent\Model;

use Illuminate\Http\Request;
class Country extends Model {

	 protected $fillable=['country_name'];
	 protected $table = 'country';


public static function getCountries()
{

$countryDetails=Country::pluck('country_name','id');
return $countryDetails;

}



}
?>

<?php namespace App;
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
use App\Models\State;
use Illuminate\Http\Request;
class State extends Model {

	 protected $fillable=['state_name','country_id'];
	 protected $table = 'state';


public static function getState($country_id)
{
$stateDetails=State::where('country_id',$country_id)->pluck('state_name','id');
return $stateDetails;

}



}

?>

<?php namespace App;

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

use Illuminate\Http\Request;

class Country extends Model {

protected $fillable=['country_name'];

protected $table = 'country';

public static function getCountries()

{

$countryDetails=Country::pluck('country_name','id');

return $countryDetails;

}

<?php namespace App;

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

use App\Models\State;

use Illuminate\Http\Request;

class State extends Model {

protected $fillable=['state_name','country_id'];

protected $table = 'state';

public static function getState($country_id)

{

$stateDetails=State::where('country_id',$country_id)->pluck('state_name','id');

return $stateDetails;

}