Membuat Cascading Dropdown Dengan Bootstrap

Hallo Sahabat bertemu kembali dengan pembahasan tentang cascading dropdown dengan bootstrap. Cascading dropdown adalah rangkaian dropdown yang saling berkaitan tergantung dari data parent atau induknya. Jadi saat salah satu item data induk dipilih maka akan mempengaruhi data selanjutnya yaitu data list anak atau childnya. Sehingga pada data parent berperan sebagai controlnya untuk data childnya.Pada kasus ini saya akan memberikan contoh dalam pembuatan cascading sederhana menggunakan bootstrap. Bagaimana cara membuatnya makanya jangan kemana-mana sahabat yuk simak langkah-langkah berikut:

Langkah pertama siapkan terlebih dahulu file HTML yang berisi template dari bootstrap tentunya, sahabat bisa langsung akses ke website Bootstrap ,dan coba sahabat perhatikan code dibawah ini:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <title>Cascading Dropdown Dengan Bootstrap</title>
  </head>
  <body>
    <h1 class="text-center">Membuat Cascading Dropdown Dengan Bootstrap</h1>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="selectFilter.min.js"></script>
  </body>
</html>

Jadi jika diperhatikan pada data Kota targetnya Kecamatan => dan option terdapat data-ref yang akan digunakan untuk menghubungkan data dari option yang terdapat di data kecamatan, serta pada data kodepos terhubung juga dengan data kecamatan. Diatas adalah contoh data yang saya buat jika ingin melihat hasilnya akan seperti pada tampilan dibawah ini:

Demikian pembahasan kali ini tentang membuat cascading dropdown dengan bootstrap, semoga bermanfaat dan selamat mencoba .

terima kasih.

Membuat Cascading Dropdown Dengan Bootstrap

Kategori