在员工入职时，有这么一个动作。如果选择的是编外的入职，那么则显示后面相关联的员工。 如果不是编外的入职，则隐藏后面的相关联的员工。
一 前面页面效果
如果选择的不是编外在职:
如果选择的是编外在职:
二.前端html页面
<div class="form-group"> <label class="col-sm-2 control-label"> <font color="red">*</font> 入职状态： </label> <div class="col-sm-2"> <select class="selectpicker show-tick" data-width="100%" id="status" data-style="btn-primary"> </select> </div> <!-- 开始关联员工的div，分开写了，一个是show1,一个是show2 默认都是不显示 display:none --> <label id="show1" class="col-sm-2 control-label" style="display: none;"> <font color="red">*</font> 关联员工： </label> <div id="show2" class="col-sm-2" style="display: none;"> <select class="selectpicker show-tick" data-width="100%" data-live-search="true" id="userrelation" data-style="btn-primary"> </select> </div> </div>
三. 相对应的JS
需要对select框进行相应的监听,是改变 change()的监听
//控制关联员工的显示 $("#status").change(function (){ //当入职状态为编外在职 if($("#status").val()==2){ // fadeIn 进行显示 $("#show1").fadeIn(); $("#show2").fadeIn(); }else{ // fadeOut进行相应的隐藏 $("#show1").fadeOut(); $("#show2").fadeOut(); } });
谢谢!!
