javascript - 如何设置空值或 null 值在 Jquery 更改中不起作用

Question

我希望输入文本中的值在隐藏过程后为空

这是我的观点:

<div class="form-group row">
  <label for="status" class="col-sm-4 col-form-label col-form-label-sm">Status Karyawan</label>
  <div class="col-sm-8">
    <select id="status" name="status" class="form-control form-control-sm" required>
        <option value="" selected>Pilih Status Karyawan</option>
        <option value="Kontrak">Kontrak</option>
        <option value="Tetap">Tetap</option>
    </select>
  </div>
</div>
<div class="form-group row" id="tgl_pengangkatan" style="display:none">
  <label for="tgl_pengangkatan" class="col-sm-4 col-form-label col-form-label-sm">Tgl. Pengangkatan</label>
  <div class="col-sm-8 input-group">
    <input name="tgl_pengangkatan" type="text" class="form-control datepicker form-control-sm" id="tgl_pengangkatan" placeholder="yyyy-mm-dd" value="">
  </div>
</div>
<div class="form-group row" id="tgl_berakhir_kontrak"  style="display:none">
  <label for="tgl_berakhir_kontrak" class="col-sm-4 col-form-label col-form-label-sm">Tgl. Akhir Kontrak</label>
  <div class="col-sm-8 input-group">
    <input name="tgl_berakhir_kontrak" type="text" class="form-control datepicker form-control-sm" id="tgl_berakhir_kontrak" placeholder="yyyy-mm-dd" value="">
  </div>
</div>

然后，这是我的脚本:

<script>
$(function () {
    $("#status").change(function() {
    var val = $(this).val();
    if(val === "Kontrak") {
        $("#tgl_berakhir_kontrak").show();
        $("#tgl_pengangkatan").hide();
        $("#tgl_pengangkatan").val('');
    }
    else if (val === "Tetap") {
        $("#tgl_pengangkatan").show();
        $("#tgl_berakhir_kontrak").hide();
        $("#tgl_berakhir_kontrak").val('');
    }
    });
});

我想把它弄成这样，以尽量减少输入过程中的错误，谢谢。

Answer 1

您尝试更改的元素应该使用其名称而不是 ID 来调用。尝试将其更改为:

$('[name="tgl_berakhir_kontrak"]').val('');

顺便说一句，为同一页面上的不同元素提供相同的名称和 ID 并不是一个好习惯。