Membuat dynamic dropdown dengan jQuery dan AJAX

ullprasetio Mei 08, 2020
PlajariKode - Hai, berjumpa lagi, pada tutorial kali ini kita akan mempelajari cara untuk membuat dynamic dropdown dengan jQuery dan AJAX.

Dynamic atau dinamis disini diartikan bisa berubah - ubah, semisalkan kita membuat 3 buah selectbox yang saling terhubung, pada selecbox pertama terdapat 4 pilihan, setelah selecbox pertama dipilih maka pada selectbox kedua tersisa 3 pilihan. Bisa dibilang seperti sistem eliminasi.

Masih bingung? Kita langsung saja ke TKP.



Biar nyambung dengan judulnya kita menggunakan jQuery, bisa didownload disini. Dan untuk mempercantik tampilan disini saya mengguakan Bootstrap, silahkan download sini.

jurusan.json

Buat file dengan nama jurusan.json lalu masukan kode dibawah ini atau bisa kalian download kode lengkapnya diakhir artikel ini.
[
 {
  "id":"1",
  "jurusan":"Rekayasa Perangkat Lunak",
  "parent_id":"0"
 },
 {
  "id":"2",
  "jurusan":"Multimedia",
  "parent_id":"0"
 },
 {
  "id":"3",
  "jurusan":"Teknik Kendaraan Ringan",
  "parent_id":"0"
 },
 {
  "id":"4",
  "jurusan":"Akomodasi Perhotelan",
  "parent_id":"0"
 },
 {
  "id":"5",
  "jurusan":"Multimedia",
  "parent_id":"1"
 },
 {
  "id":"6",
  "jurusan":"Teknik Kendaraan Ringan",
  "parent_id":"1"
 },
 {
  "id":"7",
  "jurusan":"Akomodasi Perhotelan",
  "parent_id":"1"
 },
 {
  "id":"8",
  "jurusan":"Rekayasa Perangkat Lunak",
  "parent_id":"2"
 },
 {
  "id":"9",
  "jurusan":"Teknik Kendaraan Ringan",
  "parent_id":"2"
 },
 {
  "id":"10",
  "jurusan":"Akomodasi Perhotelan",
  "parent_id":"2"
 },
 {
  "id":"11",
  "jurusan":"Rekayasa Perangkat Lunak",
  "parent_id":"3"
 },
 {
  "id":"12",
  "jurusan":"Multimedia",
  "parent_id":"3"
 },
 {
  "id":"13",
  "jurusan":"Akomodasi Perhotelan",
  "parent_id":"3"
 },
 {
  "id":"14",
  "jurusan":"Multimedia",
  "parent_id":"4"
 },
 {
  "id":"15",
  "jurusan":"Rekayasa Perangkat Lunak",
  "parent_id":"4"
 },
 {
  "id":"16",
  "jurusan":"Teknik Kendaraan Ringan",
  "parent_id":"4"
 },
 {
  "id":"17",
  "jurusan":"Teknik Kendaraan Ringan",
  "parent_id":"5"
 },
 {
  "id":"18",
  "jurusan":"Akomodasi Perhotelan",
  "parent_id":"5"
 },
 {
  "id":"20",
  "jurusan":"Multimedia",
  "parent_id":"6"
 },
 {
  "id":"21",
  "jurusan":"Akomodasi Perhotelan",
  "parent_id":"6"
 },
 {
  "id":"22",
  "jurusan":"Multimedia",
  "parent_id":"7"
 },
 {
  "id":"23",
  "jurusan":"Teknik Kendaraan Ringan",
  "parent_id":"7"
 },
 {
  "id":"24",
  "jurusan":"Teknik Kendaraan Ringan",
  "parent_id":"8"
 },
 {
  "id":"25",
  "jurusan":"Akomodasi Perhotelan",
  "parent_id":"8"
 },
 {
  "id":"26",
  "jurusan":"Rekayasa Perangkat Lunak",
  "parent_id":"9"
 },
 {
  "id":"27",
  "jurusan":"Akomodasi Perhotelan",
  "parent_id":"9"
 },
 {
  "id":"28",
  "jurusan":"Rekayasa Perangkat Lunak",
  "parent_id":"10"
 },
 {
  "id":"29",
  "jurusan":"Teknik Kendaraan Ringan",
  "parent_id":"10"
 },
 {
  "id":"30",
  "jurusan":"Multimedia",
  "parent_id":"11"
 },
 {
  "id":"31",
  "jurusan":"Akomodasi Perhotelan",
  "parent_id":"11"
 },
 {
  "id":"32",
  "jurusan":"Rekayasa Perangkat Lunak",
  "parent_id":"12"
 },
 {
  "id":"33",
  "jurusan":"Akomodasi Perhotelan",
  "parent_id":"12"
 },
 {
  "id":"34",
  "jurusan":"Rekayasa Perangkat Lunak",
  "parent_id":"13"
 },
 {
  "id":"35",
  "jurusan":"Multimedia",
  "parent_id":"13"
 },
 {
  "id":"36",
  "jurusan":"Rekayasa Perangkat Lunak",
  "parent_id":"14"
 },
 {
  "id":"37",
  "jurusan":"Teknik Kendaraan Ringan",
  "parent_id":"14"
 },
 {
  "id":"38",
  "jurusan":"Teknik Kendaraan Ringan",
  "parent_id":"15"
 },
 {
  "id":"39",
  "jurusan":"Multimedia",
  "parent_id":"15"
 },
 {
  "id":"40",
  "jurusan":"Rekayasa Perangkat Lunak",
  "parent_id":"16"
 },
 {
  "id":"41",
  "jurusan":"Multimedia",
  "parent_id":"16"
 }
]

index.php

Buat juga file index.php dan masukan kode berikut.
<!DOCTYPE html>
<html>
<head>
 <title>JSON - Dynamic Dropdown</title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 <br><br>
 <div class="container" style="width:600px;">
  <h2 align="center">JSON - Dynamic Dropdown</h2>
  <br><br>
  <select name="pil1" id="Pertama" class="form-control input-lg">
   <option value="">Pilihan Pertama</option>
  </select><br>
  <select name="pil2" id="Kedua" class="form-control input-lg">
   <option value="">Pilihan Kedua</option>
  </select><br>
  <select name="pil3" id="Ketiga" class="form-control input-lg">
   <option value="">Pilihan Ketiga</option>
  </select>
 </div>
</body>
</html>

<script>
$(document).ready(function() {

 load_json_data('Pertama');

 function load_json_data(id, parent_id) {
  var html_code = '';
  $.getJSON('jurusan.json', function(data) {
   html_code += "<option value=''>Pilihan " + id + "</option>";
   $.each(data, function(key, value) {
    if(id == 'Pertama') {
     if(value.parent_id == '0') {
      html_code += "<option value='" + value.id + "'>" + value.jurusan + "</option>";
     }
    } else {
     if(value.parent_id == parent_id) {
      html_code += "<option value='" + value.id + "'>" + value.jurusan + "</option>";
     }
    }
   });
   $('#'+id).html(html_code);
  });
 }

 $(document).on('change', '#Pertama', function() {
  var id_pertama = $(this).val();
  if(id_pertama != '') {
   load_json_data('Kedua', id_pertama);
   // console.log(id_pertama);
  } else {
   $('#Kedua').html('<option value="">Pilihan Kedua</option>');
   $('#Ketiga').html('<option value="">Pilihan Ketiga</option>');
  }
 });

 $(document).on('change', '#Kedua', function() {
  var id_kedua = $(this).val();
  if(id_kedua != '') {
   load_json_data('Ketiga', id_kedua);
   // console.log(id_kedua);
  } else {
   $('#Ketiga').html('<option value="">Pilihan Ketiga</option>');
  }
 });
});
</script>

Output:
PlajariKode - How to create dynamic dropdown using jquery and ajax



Penjelasan:
Pada kode diatas kita membuat sebuah function dengan nama load_json_data() yang didalamnya terdapat proses:

  • Pemanggilan JSON dengan fungsi getJSON()
  • Pengambilan value dari setiap objek yang ada pada file JSON
  • Pengkondisian, apabila value.parent_id sama dengan 0 maka tampilkan semua data yang parent_id-nya 0. Selain itu tampilkan data yang sesuai dengan parameter id dan parent_id yang diisikan pada function load_json_data(id, parent_id) 

$(document).on('change', '#Pertama', function() {
  var id_pertama = $(this).val();
  if(id_pertama != '') {
   load_json_data('Kedua', id_pertama);
   // console.log(id_pertama);
  } else {
   $('#Kedua').html('<option value="">Pilihan Kedua</option>');
   $('#Ketiga').html('<option value="">Pilihan Ketiga</option>');
  }
 });

 $(document).on('change', '#Kedua', function() {
  var id_kedua = $(this).val();
  if(id_kedua != '') {
   load_json_data('Ketiga', id_kedua);
   // console.log(id_kedua);
  } else {
   $('#Ketiga').html('<option value="">Pilihan Ketiga</option>');
  }
 });

Dan kode diatas digunakan untuk menampilkan data didalam selectbox kedua dan ketiga, dengan menggunakan fungsi on('change') maka setiap ada perubahan pada selectbox maka value pada selectbox berikunya juga akan berubah.

Download source code disini

Referensi:
Webslesson - JSON dynamic dependent select box using jquery and ajax
.
Tags:

Posting Komentar

2 Komentar

  1. Unknown20 Mei 2021 pukul 03.54

    Bagaimana cara penerapannya menggunakan codeigniter

    BalasHapus
  2. Unknown20 Mei 2021 pukul 03.55

    Menggabungkan ke code igniter bagaimana ya cara caranya

    BalasHapus