关于点击修改框时将所选对象信息显示在模态框中(包含单选按钮和多选按钮)

废话不多说,直接上代码

html代码:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
		aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">修改</h5>
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<form id="form">
						<input type="hidden" name="type" id="type" value="update">
						<div class="form-group">
							<label for="">编号</label> <input type="text" class="form-control"
								id="idx" name="idx" readonly>
						</div>
						<div class="form-group">
							<label for="">姓名</label> <input type="text" class="form-control"
								name="usernamex" id="usernamex" required placeholder="">
						</div>
						<div class="form-group  ">
							<label for="">部门</label> <select class="dept form-control" id="deptx"
								name="deptx">

							</select>
						</div>
						<div class="form-group">
							<label for="">性别</label>
							<div id="sexx" class="sex col"></div>
						</div>
						<div class="form-group">
							<label for="">入职日期</label> <input type="date"
								class="form-control" id="startdatex" name="startdatex">
						</div>
						<div class="form-group">
							<label for="">专业技能</label>
							<div id="skillx" class="skill form-check"></div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary"
						data-dismiss="modal">关闭</button>
					<button type="button" id="btns" class="btn btn-primary" data-dismiss="modal">更新</button>
				</div>
			</div>
		</div>
	</div>

js代码:

/**
 * 根据员工编号加载数据
 * 
 * @returns
 */
function loadDataById(id){
	$.get('person',{type:'findById',id:id},(data)=>{
		$('#idx').val(data.id);
		$('#usernamex').val(data.username);
		$('#startdatex').val(data.startdate);
		// 使部门下拉处于选中状态
		if(data.dept.dept_name!=null&&data.dept.dept_id!=null){
			$('#deptx').val(data.dept.dept_id);
		}
		// 设置选中的性别
		$("#sexx input").removeAttr("checked");
			$("#sexx input").each(function(){
				   if(data.sex.sex_id==$(this).val()){
					   $(this).attr("checked",true);
				   }
			   })
	   
	// 设置选中的专业技能
	   $("#skillx .check").removeAttr("checked");
	   $.each(data.skill,(i,item)=>{
		   $("#skillx .check").each(function(){
			   if(item.skill_id==$(this).val()){
				   $(this).attr("checked",true);
			   }
		   })
		 
	   })
	},'json')
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值