✔ Laravel 5.5 Ajax Tutorial : Select Selected Value A Dropdown With Dynamic Dropdown

By astagadragon Jumat, 19 Mei 2017 Add Comment Edit

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.

Video Tutorial Select Value Dropdown

Full Source Code

Create new Laravel Project

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

Create new Controller

php artisan make:controller CountryController

CountryController.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=null

Create 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/j4vascript">       $('#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

iklan

✔ Laravel 5.5 Ajax Tutorial : Select Selected Value A Dropdown With Dynamic Dropdown

Video Tutorial Select Value Dropdown

Create new Laravel Project

Create new Controller

CountryController.php

Create new Model

Provinces.php

Regencies.php

Districts.php

Villages.php

Add new Route

Setup Connection to Database

Create New View

More Laravel Video Tutorial

0 Response to "✔ Laravel 5.5 Ajax Tutorial : Select Selected Value A Dropdown With Dynamic Dropdown"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel