javascript - 当我将员工的身份更改为已终止或已辞职时，添加另一个辞职日期

我在更新每个员工的员工身份时遇到了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">

最佳答案

您可能有一个隐藏的日期字段，并根据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">

关于javascript - 当我将员工的身份更改为已终止或已辞职时，添加另一个辞职日期，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45523957/