Cara Mengganti Text Label Otomatis Dari Select Box jQuery Part1

Pada kesempatan kali ini saya akan menjelaskan cara mengganti text label otomatis dari select box jquery. Perlu teman-teman ketahui sebelumnya, Text label biasanya terdapat didalam form dimana label tersebut sebagai penanda untuk memberitahukan kepada pengguna berdasarkan komponen-komponen yang terkait di form. Coba teman-teman bayangkan, apabila disuatu form tidak terdapat text label. Tentunya komponen-komponen tersebut bisa saja diisi dengan data yang tidak semestinya oleh pengguna. Misalkan suatu komponen no-telpon diisi dengan email, tentunya tidak sesuai dengan fungsinya, hal tersebut bisa saja terjadi apabila disuatu komponen form tidak memiliki masing-masing text label.

Sesuai dengan judul disini, dan yang akan saya contohkan adalah merubah text label combo box berdasrkan yang dipilih, atau teman-teman 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 selanjutnya teman-teman ketikan seperti kode 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>

• Selanjutnya, jika sudah save file tersebut.

Untuk pembahasan selanjutnya, akan saya jelaskan cara mengganti text label otomatis dari select box jquery pada sesi berikutnya, semoga bermanfaat.