Cara Mengganti Text Label Otomatis Dari Select Box jQuery Part2

Melanjutkan dari sesi yang sebelumnya, pada kesempatan kali ini saya akan menjelaskan cara mengganti text label otomatis dari select box jquery part2. Jika pada sesi yang sebelumnya teman-teman sudah melakukan pembuatan form HTML dengan bootstrap, sekarang teman-teman tinggal menambahkan script jquery untuk komponen yang terkait. Pada contoh yang akan teman-teman tambahkan disini adalah kode event jquery yang diterapkan untuk event change komponen select box, apabila event tersebut dijalankan dan pada saat kondisi option dipilih.

Berikut Tahapan nya :

• Masih di file index.html yang sebelumnya sudah teman-teman buat.
• Jika sudah teman-teman ketikan kode seperti berikut setelah penutup tag </html> , berikut kodenya :

<script type="text/javascript">
$(document).ready(function(){ 
$(".custom-select[data-id=getkomponen]").on("change", function() {
      if ($(this).val() === "nama" || $(this).val() === "telpon" || $(this).val() === "email") 
      {
      $("label[id=labelkomponen]").text("Masukan "+$("option:selected", this).text());
      $("input[id=inlineFormInput]").attr("placeholder",$("option:selected", this).text()).placeholder();
      $("div[id=inlineFormInput]").show();
      } 
      else 
      {
      $("div[id=inlineFormInput]").hide();
      }
});
$(".custom-select[data-id=getkomponen]").trigger("change");

});
</script>

• sehingga, seluruh file index.html tersebut akan berisikan kode seperti berikut :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Cara Mengganti Text Label Otomatis Dari Select Box 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/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="row">
  <form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect" data-id="getkomponen">
        <option selected>Pilih...</option>
        <option value="nama">Nama</option>
        <option value="telpon">No Telpon</option>
        <option value="email">Email</option>
        <option value="alamat">Alamat</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <label class="mr-sm-2" for="inlineFormInput" id="labelkomponen">..?..</label>
      <input type="text" class="form-control" id="inlineFormInput" placeholder="..?..">
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>
</div>
</div>
</body>
</html>

<script type="text/javascript"> $(document).ready(function(){ $(".custom-select[data-id=getkomponen]").on("change", function() { if ($(this).val() === "nama" || $(this).val() === "telpon" || $(this).val() === "email") { $("label[id=labelkomponen]").text("Masukan "+$("option:selected", this).text()); $("input[id=inlineFormInput]").attr("placeholder",$("option:selected", this).text()).placeholder(); $("div[id=inlineFormInput]").show(); } else { $("div[id=inlineFormInput]").hide(); } }); $(".custom-select[data-id=getkomponen]").trigger("change"); }); </script>

Sampai disini penjelasan saya mengenai cara mengganti text label otomatis dari select box jquery, semoga bermanfaat.