[Jquery][1] Multiple Combobox dengan Bootstrap dan Jquery

Friday, 03 Jan 2020 | By Riza

Image Load

Hello world,

Ini adalah pembahasan pertama mengenai penggunaan Jquery. Akan ada banyak sekali pembahasan mengenai Jquery setelah ini. Jquery adalah library javascript yang dibuat untuk memudahkan kita dalam membuat website. Isinya ada banyak sekali. Contoh yang pertama kali saya buat ini adalah membuat multi combobox atau combobox bertingkat.

Combobox bertingkat biasanya digunakan saat website memiliki form input yang memiliki hirarki seperti pemilihan nama kota. Sebelum memilih nama kota  maka kita harus pilih dulu nama provinsi. Setelah itu pada combobox kedua akan muncul pilihan nama kota berdasarkan provinsi yang telah dipilih. Pada contoh kali ini saya menggunakan bootstrap agar tampilannya juga jadi lebih bagus. Oke langsung saja masuk ke contohnya.

Tahap 1. Buat dua form combobox (select)

<!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.4.1/css/bootstrap.min.css"

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
[removed][removed]
[removed] integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
[removed]
[removed] integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
[removed]

<title>Hello, world!</title>
</head>

<body>



<form method="post">



<select name="id_provinsi" class="form-control provinsi" required>



</select>





<select name="id_kota" class="form-control kota" required>



</select>


</form>


</body>
</html>

Perlu dicatat kalau kita wajib menggunaan file jquery.min.js (versi terbaru akan lebih baik). Pada contoh di atas saya beri tanda warna hijau.


Tahap 2 Membuat data JSON.

[{        
"provinsi": "Nanggroe Aceh Darussalam",
"kab_kot": [{
"nama": "Kota Langsa"
},
{
"nama": "Kota Lhokseumawe"
},
{
"nama": "Kota Sabang"
},]
},
{
"provinsi": "Sumatera Utara",
"kab_kot": [{
"nama": "Kota Padang Sidempuan"
},
{
"nama": "Kota Tebing Tinggi"
},
{
"nama": "Kota Binjai"
},
{
"nama": "Kota Tanjung Balai"
},
]
}]

Tahap 3. Membuat Script JQuery nya

[removed]
$(document).ready(function() {
$(function() {
$.ajax({
type: "POST",
url: "provinsi.json",
success: function(results) {
var result = JSON.parse(results);
for (var i = 0; i < result> $('.provinsi').append("
>" +
result[i].provinsi + "");
}
}
});
});
$[removed]('change', '.provinsi', function() {
var index = $('option:selected', this).attr('data-index');
console.log(index);
$.ajax({
type: "POST",
url: "provinsi.json",
success: function(results) {
$('.kota').html('');
var result = JSON.parse(results);
var kota = result[index].kab_kot;
for (var i = 0; i < kota> $('.kota').append("");
}
}
});
});

});
[removed]

Pada script di atas dibagi menjadi 2 tahap. Yang pertama adalah yg warna kuning akan dijalankan untuk memanggil json untuk menampilkan list provinsi dengan menyematkan index pada attr data-index (warna biru). Lalu pada bagian kedua (warna abu-abu) akan dijalankan saat provinsi dipilih (onchange) dengan mengambil index dari provinsi (warna merah) lalu memanggil json dan menemukan object kota berdasarkan index tersebut.
Tentu saja cara ini hanya salah satu cara sederhana yang bisa dilakukan untuk membuat multi combobox. Ada banyak cara lain yang bisa dipakai. Karena setiap orang biasanya punya caranya masing-masing.


Selamat mencoba :)