Cara Handle Input Text Box Melalui Combo Box Dengan jQuery

Pada kesempatan kali ini saya akan menjelaskan cara handle input text box melalui combo box dengan jQuery. Perlu teman-teman ketahui sebelumnya, untuk menghandle suatu komponen input text box terdapat berbagai macam cara dan salah satunya adalah menggunakan combo box yang dikolaborasikan dengan jQuery. jQuery adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML. Dan jQuery merupakan pustaka JavaScript yang paling populer, dengan 65% pemasangan dari 10 juta situs Web dengan pengunjung tertinggi. jQuery bersifat gratis, dan terbuka (open source) dibawah lisensi MIT.

Seperti pada contoh disini, saya akan menampilkan atau menyembunyikan input text box dari suatu combo box yang apabila salah satu opsi dari combo box tersebut terpilih maka input text box tersebut akan tampil atau sembunyi. Dan dari opsional tersebut masing-masingnya memiliki peran yang berbeda. Ada yang menampilkan dan ada yang menyembunyikan input text box tersebut menggunakan kondisi di jQuery. Untuk membuatnya kalian bisa ikuti tahapan yang saya berikan dibawah ini.

Berikut Tahapannya :

Â Teman-teman buat terlebih dahulu satu buah file dengan nama index.html, ketikan kode seperti berikut :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Cara Handle Input Text Box Melalui 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>Cara Handle Input Text Box Melalui Combo Box Dengan jQuery</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>

  <div class="form-group" id="kode">
  <label for="sel1">Golongan Darah:</label>
      <input class="form-control" type="text">
    </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);
      $("div[id=kode]").hide(); 
    } else { 
      $("select[id=combo2]").prop("disabled", false);
    } 
  }); 
  $("select[id=combo1]").trigger("change"); 


  $("select[id=combo2]").on("change", function() { 
    if ($(this).val() === "pilih") {
      $("div[id=kode]").hide(); 
    } else { 
      $("div[id=kode]").show();
    } 
  }); 
  $("select[id=combo2]").trigger("change");


});
</script>
</html>

<!DOCTYPE html>

<head>

<title>Cara Handle Input Text Box Melalui Combo Box Dengan jQuery</title>

<script

src="https://code.jquery.com/jquery-3.3.1.min.js"

integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

crossorigin="anonymous"></script>

</head>

<body>

<h1>Cara Handle Input Text Box Melalui Combo Box Dengan jQuery</h1>

<form>

<label for="sel1">Pilih Kelas:</label>

<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>

<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>

<label for="sel1">Golongan Darah:</label>

</div>

</form>

</div>

</body>

$(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);

$("div[id=kode]").hide();

} else {

$("select[id=combo2]").prop("disabled", false);

}

});

$("select[id=combo1]").trigger("change");

$("select[id=combo2]").on("change", function() {

if ($(this).val() === "pilih") {

$("div[id=kode]").hide();

} else {

$("div[id=kode]").show();

}

});

$("select[id=combo2]").trigger("change");

});

</script>

</html>

Jika sudah selanjutnya kalian save terlebih dahulu file tersebut, dan lihat hasilnya di browser teman-teman
Maka akan menampilkan output seperti berikut :

Jika benar maka apabila combo box Pilih Kejuruan dipilih maka akan menampilkan Input text box Golongan Darah

Sampai disini penjelasan saya mengenai cara handle input text box melalui combo box dengan jQuery, semoga bermanfaat.

Cara Handle Input Text Box Melalui Combo Box Dengan jQuery

Berikut Tahapannya :

Facebook DUMET School

Categories