上一章简单介绍了Image图片查找不存在时(九),如果没有看过，请观看上一章
在员工入职时，有这么一个动作。如果选择的是编外的入职，那么则显示后面相关联的员工。 如果不是编外的入职，则隐藏后面的相关联的员工。
一 前面页面效果
如果选择的不是编外在职:
如果选择的是编外在职:
二.前端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" > <font color="red">*</font> 关联员工： </label> <div id="show2" class="col-sm-2" > <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();
}
});谢谢!!
