Pada kesempatan kali ini saya akan menjelaskan cara membuat multiple combo box dengan jquery. Perlu teman-teman ketahui sebelumnya, untuk membuat multiple combo box tidak hanya bisa menggunakan PHP melainkan menggunakan jQuery. Meskipun teman-teman sudah pernah membuatnya dengan php namun dari cara tersebut masih ada yg lebih efisien lagi yaitu menggunakan jQuery. Namun pada contoh disini saya membuat multiple combo box tersebut dengan data statis, dan jika teman-teman ingin mendapatkan data tersebut langsung dari database teman-teman bisa mengkolaborasikan lagi dengan ajax supaya data yang tampil di combo box nantinya dinamis. Pada contoh disini saya membuat dua buah combo box yang saling terkait, namun apabila combo box yang pertama belum dipilih, maka akan mendisabled combo box dua sehingga mengharuskan user untuk melakukan pemilihan di combo box dua, baru selanjutnya untuk menentukan pemilihan di combo box kedua. Langsung aja untuk membuatnya teman-teman bisa ikuti tahapan yang saya berikan di bawah ini.

Berikut Tahapannya :

  • Teman-teman buat terlebih dahulu satu buah file dengan nama index.html
  • Jika sudah selanjutnya teman-teman ketikan kode seperti berikut :
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Cara Membuat 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="<script>" title="<script>" />
  <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="<script>" title="<script>" />
</head>
<body>

<div class="container">
  <h1>Multiple Combo Box (Dumet School)</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>
  • Jika sudah selanjutnya simpan file tersebut, dan lihat hasilnya melalui browser teman-teman
  • Maka akan menampilkan penampakan seperti berikut :

  • Untuk mengujinya, bisa teman-teman tes dengan memilih kedua combo box tersebut.

Sampai disini penjelasan saya mengenai cara membuat multiple combo box dengan jquery, semoga bermanfaat.