JQuery DropDown Change Event Example

by mylastof

HTML

<div class="mb-3">
  <label for="status" class="form-label">Pilih Status</label>
  <div class="input-group mb-3">
    <select name="status" class="form-select" id="status" required="">
      <option value="" selected="selected">Pilih status</option>
      <option value="1">Data Pesanan</option>
      <option value="2">Bahan Produk</option>
      <option value="3">Sablon</option>
      <option value="4">Bordir</option>
      <option value="5">Penjahit</option>
      <option value="6">QC</option>
      <option value="7">Packing</option>
    </select>
    <select name="stat" class="form-select" id="stat" required="">
      <option value="">Pilih</option>
      <option value="ada">Ada</option>
      <option value="tidak">Tidak Ada</option>
    </select>
  </div>
</div>

JavaScript

$(document).ready(function() {
  $("#status").change(function() {
    let val = this.value;
    // alert("Selected value is : " + val);

    if (val == 1) {
      $('#stat option[value=ada]').text('Lengkap');
      $('#stat option[value=tidak]').text('Tidak Lengkap');
    } else if (val == 2) {
      $('#stat option[value=ada]').text('Ada');
      $('#stat option[value=tidak]').text('Belum Ada');
    } else {
      $('#stat option[value=ada]').text('Masuk');
      $('#stat option[value=tidak]').text('Selesai');
    }
  });
});