Cara Selected Option Otomatis Multiple Combo Box

Pada kesempatan kali ini saya akan menjelaskan cara selected option otomatis multiple combo box. Perlu teman-teman ketahui sebelumnya, cara selected option otomatis multiple combo box adalah dimana ketika combo box yang satu dalam kondisi tidak terpilih atau tidak terseleksi maka combo box yang satu setelahnya akan otomatis dengan sendirinya akan men reset ke dalam kondisi tidak terpilih atau tidak terseleksi. Dan untuk membuat combo box tersebut otomatis men reset, maka harus dikolaborasikan dengan kode jQuery dimana nantinya akan menggunakan event change. Langsung saja, untuk membuatnya kalian bisa langsung ikuti tahapan yang saya berikan dibawah ini.

Berikut Tahapannya :

• Teman-teman buat terlebih dahulu satu buah file dengan nama index.html
• Jika sudah 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">
  <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></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" 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" 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('selectedIndex',0);
      $("select[id=combo2]").prop("disabled", true); 
    } else { 
      $("select[id=combo2]").prop("disabled", false);
    } 
  }); 
  $("select[id=combo1]").trigger("change"); });
</script>
</html>

• Selanjutnya save terlebih dahulu file tersebut dan lihat hasilnya di browser teman-teman.

Sampai disini penjelasan saya mengenai cara selected option otomatis multiple combo box, Semoga bermanfaat.