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

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">