Question

在更新每位员工的员工状态时，我在javascript和前端开发方面遇到了一些麻烦。当员工状态被终止或辞职时，它将自动添加员工终止或辞职日期之下的另一个输入字段。如果员工仍未辞职或终止，则不会显示任何内容或任何内容都不会更改。我真的不知道逻辑如何工作以及如何编写代码。所以这是我的代码在html和php中获取员工状态的数据：

<select class="form-control" id="status" name="status" style="height: 5%" required="">
<option <?php if ($rows['status'] == 'REGULAR EMPLOYEE' ) {echo 'selected'; }?> value="REGULAR EMPLOYEE"> REGULAR EMPLOYEE </option>
<option <?php if ($rows['status'] == 'CONTRACTUAL' ) {echo 'selected'; }?> value="CONTRACTUAL"> CONTRACTUAL </option>
<option <?php if ($rows['status'] == 'PROBATIONARY' ) {echo 'selected'; }?> value="PROBATIONARY"> PROBATIONARY </option>
<option <?php if ($rows['status'] == 'TERMINATED' ) {echo 'selected'; }?> value="TERMINATED"> TERMINATED </option>
<option <?php if ($rows['status'] == 'RESIGNED' ) {echo 'selected'; }?> value="RESIGNED"> RESIGNED </option>
</select>

当他们选择终止或辞职时，它会自动显示下面的另一个字段，如：

<label>Date Terminated</label>
<input type="date">

or

<label>Date Resigned</label>
<input type="date">

Answer 1

您可以拥有隐藏日期字段，并根据select值更改显示/隐藏它。

$("#status").on("change", function(){
  if( $(this).val() == "TERMINATED" || $(this).val() == "RESIGNED" ){
    $(".dateEnd").show(200);
  }else{
    $(".dateEnd").hide(200);
  }
});

.dateEnd{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" id="status" name="status" style="height: 5%" required="">
  <option  value="REGULAR EMPLOYEE"> REGULAR EMPLOYEE </option>
  <option  value="CONTRACTUAL"> CONTRACTUAL </option>
  <option  value="PROBATIONARY"> PROBATIONARY </option>
  <option  value="TERMINATED"> TERMINATED </option>
  <option  value="RESIGNED"> RESIGNED </option>
</select>
<br>
<input type="date" class="dateEnd">

当我将员工状态更改为已终止或已辞职时，添加另一个已停用的字段日期

1 个答案: