The Blog

My Toughts

Nested Dropdown Implementing Indonesian Region

Nested Dropdown Implementing Indonesian Region

Dynamic Dependent means child drop down list data has been filled when we have select parent drop down list box. This way this dynamic dependent dropdown list box has been working. Here we have use Ajax with Laravel for developed dynamic dependent select box. When we have select parent select box then it will send Ajax request to Laravel code for fetch data for child select box. So this way child select box has been filled with data. This whole process has been done without refresh of web page because we have use Ajax with Laravel. 

Let's create new controller, and looks like this.

// App/Http/Controllers/Api/Region/RegionController

<?php

namespace App\Http\Controllers\Api\Region;

use Illuminate\Http\Request;
use App\Models\Region\Regency;
use App\Models\Region\Village;
use App\Models\Region\District;
use App\Http\Controllers\Controller;

class RegionController extends Controller
{
    public function postData()
    {
        $set = request()->id;

        $regencies = Regency::where('province_id', $set)->get();                // Kabupaten
        $districts = District::where('regency_id', $set)->get();                // Kecamatan
        $villages = Village::where('district_id', $set)->get();                 // Kelurahan

        switch(request()->type):
            case 'regencies':
                $return = '<option value="">--Please Select--</option>';
                foreach($regencies as $item)
                    $return .= "<option value='$item->id'>$item->name</option>";
                return $return;
            break;
            case 'districts':
                $return = '<option value="">--Please Select--</option>';
                foreach($districts as $item)
                    $return .= "<option value='$item->id'>$item->name</option>";
                return $return;
            break;
            case 'villages':
                $return = '<option value="">--Please Select--</option>';
                foreach($villages as $item)
                    $return .= "<option value='$item->id'>$item->name</option>";
                return $return;
            break;
        endswitch;
    }
}

Here is your view looks like

<div class="row">
  <div class="col-md-3">
    <div class="form-group{{ $errors->has('province') ? ' has-error' : '' }}">
      <label for="province" class="control-label col-md-3">Provinsi</label>
      <div class="col-md-9">
        <select name="province" class="form-control select2me" id="select-province">
          <option value="">--Please Select--</option>
          @foreach($provinces as $item)
          <option value="{{ $item->id }}" {{ old('province') == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
          @endforeach
        </select>
        @if ($errors->has('province'))
        <span class="help-block">
          <strong>{{ $errors->first('province') }}</strong>
        </span>
        @endif
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="form-group{{ $errors->has('regency') ? ' has-error' : '' }}">
      <label for="regency" class="control-label col-md-3">Kota / Kabupaten</label>
      <div class="col-md-9">
        <select name="regency" class="form-control select2me" id="select-regency">
          <option value="">--Please Select--</option>
          @foreach($regencies as $item)
          <option value="{{ $item->id }}" {{ old('regency') == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
          @endforeach
        </select>
        @if ($errors->has('regency'))
        <span class="help-block">
          <strong>{{ $errors->first('regency') }}</strong>
        </span>
        @endif
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="form-group{{ $errors->has('district') ? ' has-error' : '' }}">
      <label for="district" class="control-label col-md-3">Kecamatan</label>
      <div class="col-md-9">
        <select name="district" class="form-control select2me" id="select-district">
          <option value="">--Please Select--</option>
          @foreach($districts as $item)
          <option value="{{ $item->id }}" {{ old('district') == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
          @endforeach
        </select>
        @if ($errors->has('district'))
        <span class="help-block">
          <strong>{{ $errors->first('district') }}</strong>
        </span>
        @endif
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="form-group{{ $errors->has('village') ? ' has-error' : '' }}">
      <label for="village" class="control-label col-md-3">Kelurahan</label>
      <div class="col-md-9">
        <select name="village" class="form-control select2me" id="select-village">
          <option value="">--Please Select--</option>
          @foreach($villages as $item)
          <option value="{{ $item->id }}" {{ old('village') == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
          @endforeach
        </select>
        @if ($errors->has('village'))
        <span class="help-block">
          <strong>{{ $errors->first('village') }}</strong>
        </span>
        @endif
      </div>
    </div>
  </div>
</div>

and here is your ajax script looks like

<script>
        $('#select-province').on('change', function(){
          $.post('{{ url('api/region/getData') }}', {type: 'regencies', id: $('#select-province').val()}, function(e){
              $('#select-regency').html(e);
          });
          $('#select-district').html('');
          $('#select-village').html('');
      });
      $('#select-regency').on('change', function(){
          $.post('{{ url('api/region/getData') }}', {type: 'districts', id: $('#select-regency').val()}, function(e){
              $('#select-district').html(e);
          });
          $('#select-village').html('');
      });
      $('#select-district').on('change', function(){
          $.post('{{ url('api/region/getData') }}', {type: 'villages', id: $('#select-district').val()}, function(e){
              $('#select-village').html(e);
          });
      });
</script>

Good luck, and hope it helps.


- 3/4 -