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

最新推荐文章于 2023-03-17 11:06:16 发布

原创最新推荐文章于 2023-03-17 11:06:16 发布 · 2.2k 阅读

7 ·

CC 4.0 BY-SA版权

转载请注明出处(两个蝴蝶飞)

JS前端小方法专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个基于HTML和JavaScript的员工管理系统中，如何根据入职状态（编外在职与否）动态显示或隐藏关联员工的选择框。通过监听<select>元素的change事件，实现显示逻辑。

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

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

一前面页面效果

如果选择的不是编外在职:
在这里插入图片描述
如果选择的是编外在职:

二.前端html页面

				<div class="form-group">
					<label class="col-sm-2 control-label">
						<font color="red">*</font>&nbsp;入职状态：
					</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>&nbsp;关联员工：
					</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();
	}
});

谢谢!!