根据Select框的取值，动态显示另外的Div(十)-摩杜云开发者社区

上一章简单介绍了Image图片查找不存在时(九),如果没有看过，请观看上一章

在员工入职时，有这么一个动作。如果选择的是编外的入职，那么则显示后面相关联的员工。如果不是编外的入职，则隐藏后面的相关联的员工。

如果选择的不是编外在职:

根据Select框的取值，动态显示另外的Div(十)

如果选择的是编外在职:

根据Select框的取值，动态显示另外的Div(十)

二.前端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();
  }
});

谢谢!!