Cara Membuat Multiple Combo Box Dengan jQuery
Di kesempatan kali ini saya akan menjelaskan cara membangun multiple combo box dengan jquery. Perlu teman-teman ketahui sebelumnya, bagi membangun multiple combo box tak hanya dapat menggunakan PHP melainkan menggunakan jQuery. Meskipun teman-teman telah pernah membuatnya dengan php namun dari cara tersebut masih ada yg lebih efisien lagi yaitu menggunakan jQuery. Namun di contoh disini saya membangun multiple combo box tersebut dengan data statis, dan kalau teman-teman ingin memperoleh data tersebut seketika dari database teman-teman dapat mengkolaborasikan lagi dengan ajax supaya data yang tampil di combo box nantinya dinamis. Di contoh disini saya membangun dua buah combo box yang saling terkait, namun apabila combo box yang pertama-tama belum dipilih, karenanya akan mendisabled combo box dua sehingga mengharuskan user bagi menjalankan pemilihan di combo box dua, baru berikutnya bagi menentukan pemilihan di combo box kedua. Seketika aja bagi membuatnya teman-teman dapat ikuti tahapan yang saya berikan di bawah ini.
Berikut Tahapannya :
- Teman-teman bikin terlebih dahulu satu buah file dengan nama index.html
- Sekiranya telah berikutnya teman-teman ketikan kode seperti berikut :
<!DOCTYPE html>
<html lang=en>
<head>
<title>Cara Membangun Multiple Combo Box Dengan jQuery</title>
<meta charset=utf-8>
<meta name=viewport content=width=device-width, initial-scale=1>
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
<img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data-wp-preserve=%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.3.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E data-mce-resize=false data-mce-placeholder=1 class=mce-object width=20 height=20 alt=Di kesempatan kali ini saya akan menjelaskan Cara Membangun Multiple Combo Box Dengan jQuery title=Cara Membangun Multiple Combo Box Dengan jQuery />
<img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data-wp-preserve=%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.7%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E data-mce-resize=false data-mce-placeholder=1 class=mce-object width=20 height=20 alt=Di kesempatan kali ini saya akan menjelaskan Cara Membangun Multiple Combo Box Dengan jQuery title=Cara Membangun Multiple Combo Box Dengan jQuery />
</head>
<body>
<div class=container>
<h1>Multiple Combo Box (Source Code Aplikasi)</h1>
<form>
<div class=form-group>
<label for=sel1>Pilih Kelas:</label>
<select class=form-control select id=combo1>
<option value=pilih>Pilih</option>
<option value=kelas10>Kelas X</option>
<option value=kelas11>Kelas XI</option>
<option value=kelas12>Kelas XII</option>
</select>
<br>
<label for=sel2>Pilih Kejuruan:</label>
<select class=form-control select id=combo2>
<option value=pilih>Pilih</option>
<option value=ak>Accounting (AK)</option>
<option value=ap>Administrasi Perkantoran (AP)</option>
<option value=pj>Penjualan (PJ)</option>
</select>
</div>
</form>
</div>
</body>
<script>
$(document).ready(function(){ $(.select[id=combo1]).on(change, function() { if ($(this).val() === pilih) { $(.select[id=combo2]).prop(disabled, true); $('.select[id=combo2]').selectpicker('refresh'); } else { $(.select[id=combo2]).prop(disabled, false); $('.select[id=combo2]').selectpicker('refresh'); } }); $(.select[id=combo1]).trigger(change); });
</script>
</html>
- Sekiranya telah berikutnya simpan file tersebut, dan lihat hasilnya via browser teman-teman
- Karenanya akan menampilkan penampakan seperti berikut :
- Bagi mengujinya, dapat teman-teman tes dengan memilih kedua combo box tersebut.
Hingga disini penjelasan saya mengenai cara membangun multiple combo box dengan jquery, semoga bermanfaat.
Sumber https://kursuswebsite.org
