Laravel 5.5 Ajax tutorial : This tutorial will show you how to select Selected Value from a Dynamic Dropdown in laravel 5.5 with JQuery Ajax step by step.
Full Source Code
Download Database Project from this link https://raw.githubusercontent.com/edwardsamuel/Wilayah-Administratif-Indonesia/master/mysql/indonesia.sql
Happy coding guys ...
Video Tutorial Select Value Dropdown
Full Source Code
Create new Laravel Project
composer create-project --prefer-dist laravel/laravel indonesiaCreate new Controller
php artisan make:controller CountryControllerCountryController.php
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use IlluminateSupportFacadesInput;
use AppProvinces;
use AppRegencies;
use AppDistricts;
use AppVillages;
class CountryController extends Controller
{
public function provinces(){
$provinces = Provinces::all();
return view('indonesia', compact('provinces'));
}
public function regencies(){
$provinces_id = Input::get('province_id');
$regencies = Regencies::where('province_id', '=', $provinces_id)->get();
return response()->json($regencies);
}
public function districts(){
$regencies_id = Input::get('regencies_id');
$districts = Districts::where('regency_id', '=', $regencies_id)->get();
return response()->json($districts);
}
public function villages(){
$districts_id = Input::get('districts_id');
$villages = Villages::where('district_id', '=', $districts_id)->get();
return response()->json($villages);
}
}Create new Model
php artisan make:model Provinces
php artisan make:model Regencies
php artisan make:model Districts
php artisan make:model Villages
Provinces.php
<?php
namespace App;
use IlluminateDatabaseEloquentModel;
class Provinces extends Model
{
protected $table = 'provinces';
}Regencies.php
<?php
namespace App;
use IlluminateDatabaseEloquentModel;
class Regencies extends Model
{
protected $table = 'regencies';
}Districts.php
<?php
namespace App;
use IlluminateDatabaseEloquentModel;
class Districts extends Model
{
protected $table = 'districts';
}Villages.php
<?php
namespace App;
use IlluminateDatabaseEloquentModel;
class Villages extends Model
{
protected $table = 'villages';
}Add new Route
Route::get('/indonesia','CountryController@provinces');
Route::get('/json-regencies','CountryController@regencies');
Route::get('/json-districts', 'CountryController@districts');
Route::get('/json-village', 'CountryController@villages');
Setup Connection to Database
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=indonesia
DB_USERNAME=root
DB_PASSWORD=nullCreate New View
Indonesia.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Indonesia</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="col-lg-4">
<h2>Laravel 5.5 JQuery Ajax Example</h2>
{{ Form::open() }}
<div class="form-group">
<label for="">Your Provinces</label>
<select class="form-control" name="provinces" id="provinces">
<option value="0" disable="true" selected="true">=== Select Provinces ===</option>
@foreach ($provinces as $key => $value)
<option value="{{$value->id}}">{{ $value->name }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="">Your Regencies</label>
<select class="form-control" name="regencies" id="regencies">
<option value="0" disable="true" selected="true">=== Select Regencies ===</option>
</select>
</div>
<div class="form-group">
<label for="">Your Districts</label>
<select class="form-control" name="districts" id="districts">
<option value="0" disable="true" selected="true">=== Select Districts ===</option>
</select>
</div>
<div class="form-group">
<label for="">Your Villages</label>
<select class="form-control" name="villages" id="villages">
<option value="0" disable="true" selected="true">=== Select Villages ===</option>
</select>
</div>
{{ Form::close() }}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#provinces').on('change', function(e){
console.log(e);
var province_id = e.target.value;
$.get('/json-regencies?province_id=' + province_id,function(data) {
console.log(data);
$('#regencies').empty();
$('#regencies').append('<option value="0" disable="true" selected="true">=== Select Regencies ===</option>');
$('#districts').empty();
$('#districts').append('<option value="0" disable="true" selected="true">=== Select Districts ===</option>');
$('#villages').empty();
$('#villages').append('<option value="0" disable="true" selected="true">=== Select Villages ===</option>');
$.each(data, function(index, regenciesObj){
$('#regencies').append('<option value="'+ regenciesObj.id +'">'+ regenciesObj.name +'</option>');
})
});
});
$('#regencies').on('change', function(e){
console.log(e);
var regencies_id = e.target.value;
$.get('/json-districts?regencies_id=' + regencies_id,function(data) {
console.log(data);
$('#districts').empty();
$('#districts').append('<option value="0" disable="true" selected="true">=== Select Districts ===</option>');
$.each(data, function(index, districtsObj){
$('#districts').append('<option value="'+ districtsObj.id +'">'+ districtsObj.name +'</option>');
})
});
});
$('#districts').on('change', function(e){
console.log(e);
var districts_id = e.target.value;
$.get('/json-village?districts_id=' + districts_id,function(data) {
console.log(data);
$('#villages').empty();
$('#villages').append('<option value="0" disable="true" selected="true">=== Select Villages ===</option>');
$.each(data, function(index, villagesObj){
$('#villages').append('<option value="'+ villagesObj.id +'">'+ villagesObj.name +'</option>');
})
});
});
</script>
</body>
</html>
Download Database Project from this link https://raw.githubusercontent.com/edwardsamuel/Wilayah-Administratif-Indonesia/master/mysql/indonesia.sql
More Laravel Video Tutorial
Happy coding guys ...
