1. Laravel
  2. PHP

Membuat Dependent Dropdown di Laravel

Untuk beberapa kasus kita mungkin memiliki sebuah form di mana terdapat dropdown yang bergantung satu sama lain. Contoh umum adalah pemilihan kota, di mana kita harus memilih provinsi terlebih dahulu, dan kemudian daftar kota. Daftar kota yang ditampilkan pada dropdown akan bergantung pada provinsi yang dipilih. Dropdown seperti inilah yang kita sebut sebagai Dependent Dropdown. Pada tutorial kali ini kita akan membahas bagaimana cara Membuat Dependent Dropdown di Laravel menggunakan jQuery.

Sebagaimana telah disebutkan pada pembuka artikel ini, contoh paling umum untuk mengimplementasikan dependent dropdown adalah pemilihan kota. Kita akan mendemonstrasikan bagaimana membuat dependent dropdown di Laravel dengan menggunakan contoh kasus ini.

Persiapan Database

Sebelum masuk ke inti dari pembahasan pada tutorial kali ini, untuk bisa mendemonstrasikan dependent dropdown, hal pertama yang perlu kita persiapkan adalah table dan data yang akan kita gunakan. Kita akan menggunakan data wilayah administratif Indonesia pada tutorial ini.

Dimana kita bisa mendapatkan daftar wilayah administratif di Indonesia? Ada banyak resource yang menyediakan data mengenai wilayah di Indonesia, akan tetapi pada tutorial ini kita akan menggunakan sebuah package untuk Laravel yang telah menyediakan daftar wilayah di Indonesia.

Dark Mode

indonesia (this link opens in a new window) by laravolt (this link opens in a new window)

Package Laravel yang berisi data Provinsi, Kabupaten/Kota, dan Kecamatan/Desa di seluruh Indonesia.

Package diatas memiliki data-data yang kita perlukan untuk membuat contoh dependent dropdown. Langkah pertama instal package laravolt/indonesia dengan perintah dibawah ini:

composer require laravolt/indonesia

Kemudian publish migration dan config yang disediakan oleh package ini:

php artisan vendor:publish --provider="Laravolt\Indonesia\ServiceProvider"

Selanjutnya gunakan perintah dibawah ini untuk mengeksekusi migration dari package ini dan mengeksekusi seeder untuk mengisi data wilayah.

php artisan migrate
php artisan laravolt:indonesia:seed

Setelah mengeksekusi perintah diatas, kita telah memiliki data-data yang kita perlukan.

Membuat Dependent Dropdown di Laravel

Dependent Dropdown di Laravel

Setelah persiapan database selesai, kita akan mulai pada inti dari tutorial kali ini. Langkah pertama kita akan membuat sebuah controller dan view untuk menampilkan form.

Dependent Dropdown Controller

php artisan make:controller DependentDropdownController

Kemudian tambahkan method index untuk menampilkan form.

<?php

namespace App\Http\Controllers;

use Laravolt\Indonesia\Models\Province;

class DependentDropdownController extends Controller
{
    public function index()
    {
        $provinces = Province::pluck('name', 'id');

        return view('dependent-dropdown.index', [
            'provinces' => $provinces,
        ]);
    }
}

View

Kemudian buat sebuah view (resources/views/dependent-dropdown/index.blade.php) menggunakan konten seperti dibawah ini:

<form>
    <div class="form-group row">
        <label for="name" class="col-md-4 col-form-label">Province</label>

        <div class="col-md-6">
            <select name="province" id="province" class="form-control">
                <option value="">== Select Province ==</option>
                @foreach ($provinces as $id => $name)
                    <option value="{{ $id }}">{{ $name }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="form-group row">
        <label for="name" class="col-md-4 col-form-label">City</label>

        <div class="col-md-6">
            <select name="city" id="city" class="form-control">
                <option value="">== Select City ==</option>
            </select>
        </div>
    </div>
</form>

Route

Tambahkan Route untuk menampilkan halaman dependent dropdown.

Route::get('dependent-dropdown', 'DependentDropdownController@index')
    ->name('dependent-dropdown.index');

Setelah menambahkan kode diatas, ketika kita membuka halaman /dependent-dropdownakan terlihat kurang lebih seperti gambar dibawah ini.

Membuat Dependent Dropdown di Laravel

Dropdown Daftar Kota

Setelah berhasil menampilkan halaman diatas, langkah selanjutnya kita akan membahas bagaimana menampilkan daftar kota berdasarkan provinsi yang dipilih. Untuk itu kita perlu menambahkan sebuah ajax request ketika provinsi di pilih. Kita bisa menggunakan event change pada dropdown provinsi.

$(function () {
    $('#province').on('change', function () {
        // Kode untuk ajax request disini 
    });
});

Dependent Dropdown Controller

Pada Controller kita perlu menambahkan sebuah method baru untuk melakukan query pada table kota dan mengembalikan response dari hasil query ke view.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Laravolt\Indonesia\Models\City;
//

class DependentDropdownController extends Controller
{
    //
    public function store(Request $request)
    {
        $cities = City::where('province_id', $request->get('id'))
            ->pluck('name', 'id');
    
        return response()->json($cities);
    }
}

Route

Lalu kita daftarkan method diatas pada route.

Route::post('dependent-dropdown', 'DependentDropdownController@store')
    ->name('dependent-dropdown.store');

View

Langkah terakhir, pada view tambahkan kode javascript dibawah ini. Pada contoh ini kita menggunakan library axios yang sudah ada secara default pada saat menginstal Laravel.

Pastikan jquery dan axios sudah di load pada view yang digunakan.

$(function () {
    $('#province').on('change', function () {
        axios.post('{{ route('dependent-dropdown.store') }}', {id: $(this).val()})
            .then(function (response) {
                $('#city').empty();

                $.each(response.data, function (id, name) {
                    $('#city').append(new Option(name, id))
                })
            });
    });
});

Pada tutorial kali ini kita hanya akan membuat dropdown kota yang tergantung pada dropdown provinsi. Berikut ini merupakan contoh implementasi dari tutorial diatas.

Agar lebih memahami cara membuat dependent dropdown di Laravel silahkan lakukan hal yang sama untuk kabupaten dan desa.

FAQ

Berikut ini beberapa error yang dialami oleh pengguna yang mencoba mengikuti artikel ini.

Uncaught ReferenceError: $ is not defined

Error ini terjadi karena kode javascript yang digunakan pada artikel ini diload sebelum library jquery diload. Pastikan library jquery sudah diload pada layout/view yang digunakan.

Kasus lain, library jQuery sudah diload, akan tetapi menggunakan tag defer (script akan dieksekusi setelah parsing HTML selesai).

<script src="{{ asset('js/app.js') }}" defer></script>

Untuk kasus ini, kita perlu merubah kode javascript yang kita punya agar di eksekusi setelah parsing HTML selesai.

window.addEventListener('DOMContentLoaded', function() {
    $(function () {
        $('#province').on('change', function () {
            //
        });
    });
});

Uncaught ReferenceError: axios is not defined

Error ini terjadi karena library axios tidak ada, Laravel secara default menyertakan library ini. Jika anda tidak menggunakan library axios ini, anda bisa menggunakan jQuery untuk request ajax.

$(function () {
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
    });

    $('#province').on('change', function () {
        $.ajax({
            url: '{{ route('dependent-dropdown.store') }}',
            method: 'POST',
            data: {id: $(this).val()},
            success: function (response) {
                $('#city').empty();

                $.each(response, function (id, name) {
                    $('#city').append(new Option(name, id))
                })
            }
        })
    });
});

People reacted to this story.
Show comments Hide comments
Comments to: Membuat Dependent Dropdown di Laravel
  • May 30, 2020

    Ada github repo nya?
    Saya pakai Laravel 7. Gak bisa nich pas name resource dan axios post nya.
    Thanks

    Reply
    • June 5, 2020

      Errornya apa?
      Saya akan coba buatkan repo di github untuk simulasi.

      Reply
      • June 5, 2020

        di laravel 7 errornya seperti digambar ini https://prnt.sc/sufjvy

        Reply
        • June 5, 2020

          Dari errornya ini route yang harusnya di panggil dengan method POST bukan GET. Route ini harusnya di panggil melalui ajax request bukan dari address bar browser.

          Reply
  • June 6, 2020

    mas saya masih bingung di kode javascript-nya

    js-nya tidak berhasil jalan. saya menerapkan cara yang sama tapi berbeda kasusnya (bukan provinsi dan city)

    Reply
    • June 6, 2020

      Barangkali target elemennya salah.

      $('#ELEMEN_HTML').on('change', function () {
              // Kode untuk ajax request disini 
      });
      
      Reply
      • June 7, 2020

        Apakah ada yg salah dengan script nya seperti ini:

        $(function () {
            $('#mapel').on('change', function () {
                axios.post('{{ route('siswa_store') }}', {id: $(this).val()})
                    .then(function (response) {
                        $('#pengajar').empty();
        
                        $.each(response.data, function (id, nama) {
                            $('#pengajar').append(new Option(nama, id))
                        })
                    });
            });
        });
        

        trima kasih

        Reply
        • June 7, 2020

          Sepertinya ga ada yang salah sama kode nya.
          Coba inspect element barangkali ada informasi mengenai errornya.

          Reply
  • July 2, 2020
    public function index()
    {
        $provinces = Province::pluck('name', 'id');
    
        return view('dependent-dropdown.index', [
            'provinces' => $provinces,
        ]);
    }
    

    Untuk \"Province\" mengarahnya ke Model, saya cari untuk contoh modelnya gak ada ya?

    Reply
    • July 7, 2020

      Sudah saya update artikel ini dengan menambahkan import class untuk model Province.
      Model Province menggunakan class dari package laravolt (Laravolt\\Indonesia\\Models\\Province)

      Reply
  • July 7, 2020

    Kok scriptnya salah ya? Saya sudah ikuti tutornya dan copast semua kodingnya ttep gk bisa

    Reply
    • July 7, 2020

      Ada pesan error?
      Untuk memudahkan saya menambahkan link github untuk contoh implementasi pada artikel ini.

      Reply
      • July 7, 2020

        Uncaught ReferenceError: $ is not defined

        Itu error nya

        Reply
        • July 7, 2020

          pastikan jquery sudah di load sebelum menambahkan kode javascript pada artikel ini.
          Atau jika jquery sudah di load tetapi menggunakan attribute defer, ada sedikit tambahan pada scriptnya.

          window.addEventListener('DOMContentLoaded', function() {
              $(function () {
                  $('#province').on('change', function () {
                      //
                      //
                  });
              });
          });
          
          Reply
          • July 7, 2020
            Uncaught ReferenceError: axios is not defined
            at HTMLSelectElement. (dependent-dropdown:327)
            at HTMLSelectElement.dispatch (jquery.min.js:2)
            at HTMLSelectElement.v.handle (jquery.min.js:2)
            

            Errornya itu bang
            Scriptnya :

            window.addEventListener('DOMContentLoaded', function() {
                $(function () {
                    $('#province').on('change', function () {
                        axios.post('/dependent-dropdown', {id: $(this).val()})
                        .then(function (response) {
                            $('#city').empty();
            
                            $.each(response.data, function (id, name) {
                                $('#city').append(new Option(name, id))
                            })
                        });
                    });
                });
            });
            

            Maaf baru belajar javascript

          • July 7, 2020

            library axiosnya belum ada.
            ini pake Laravel berapa? Secara default axios itu udah ada di Laravel. https://github.com/Lab-Informatika/laravel-dependent-dropdown-demo/blob/master/resources/js/bootstrap.js#L22

            Kalo memang axios ga digunakan bisa pake jQuery juga untuk request.

            window.addEventListener('DOMContentLoaded', function() {
                $(function () {
                    $.ajaxSetup({
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
                    });
            
                    $('#province').on('change', function () {
                        $.ajax({
                            url: '{{ route('dependent-dropdown.store') }}',
                            method: 'POST',
                            data: {id: $(this).val()},
                            success: function (response) {
                                $('#city').empty();
            
                                $.each(response, function (id, name) {
                                    $('#city').append(new Option(name, id))
                                })
                            }
                        })
                    });
                });
            });
            
  • July 7, 2020

    Versi 5.8.38 bang

    POST http://127.0.0.1:8000/dependent-dropdown 419 (unknown status)

    Errornya itu lg bang 🙁

    Reply
    • July 7, 2020

      Itu karena request ajax tidak menyertakan header untuk CSRF Token. Setiap request POST ke laravel harus menyertakan CSRF Token di headernya.
      Coba perhatikan bagian ini:

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

      Pastikan pada layout viewnya sudah ada csrf-token meta. Kalo menggunakan layout default dari Laravel, seharusnya csrf-token meta ini sudah ada secara default.

      <meta name="csrf-token" content="{{ csrf_token() }}">
      

      https://github.com/Lab-Informatika/laravel-dependent-dropdown-demo/blob/master/resources/views/layouts/app.blade.php#L8

      Reply
      • July 8, 2020

        Udh solved bang, terimakasih

        Reply
  • July 13, 2020

    bang, ini saya berhasil ngikuti cara abang. Tp gmna caranya agar select yg dependent ini kembali ke value default lg klo misalny select utamanya saya pilih ke value default?

    Reply
    • July 26, 2020

      Paling value defaultnya di simpen di variable javascript. Di event onChange dropdown di cek lagi, kalo value = defaultnya, trus set value dropdown pake javascript sesuai dengan nilai defaultnya.

      Reply
  • July 14, 2020

    gan gimana klo misalnya dropdownnya dapat tampil otomatis ketika di form edit? klo yg dropdown untuk form add berhasil tapi ketika di form edit tetap muncul juga ajaxnya tapi hanya dropdown yg utama saja muncul yg kedua harus pilih manual dulu.. itu gimana ya?

    Reply
    • July 26, 2020

      Lakukan query di controller kemudian passing datanya ke view, looping hasil query di dropdown edit.

      Reply

Write a response

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

Attach images - Only PNG, JPG, JPEG and GIF are supported.