ajax弹窗 select回显

最新推荐文章于 2022-09-10 02:03:50 发布

qq_37516425

最新推荐文章于 2022-09-10 02:03:50 发布

阅读量561

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_37516425/article/details/72818091

本文介绍了在使用Bootstrap弹窗时遇到的Select回显问题，由于弹窗不是传统表单提交，因此Model无法直接回显数据。讨论了JSTL和EL在服务端的作用，指出在客户端JavaScript和HTML中无法直接使用服务端语言进行判断。提出了利用jQuery进行条件判断的解决方案，并展示了如何实现选择项的回显和弹窗关闭后的页面重载，以确保修改的内容可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

</div>
 <!-- 客户编辑对话框 -->
	<div class="modal fade" id="customerEditDialog" tabindex="-1" role="dialog"  style="font-size: 12px;" 
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">修改客户信息</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="edit_factory_form">
						<input type="hidden" id="factory_id" name="factoryId" />
						<div class="form-group">
							<label for="factory_Name" class="col-sm-2 control-label" style="float:left;padding:7px 15px 0 27px;">厂家全称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="factory_fullName" placeholder="厂家全称" name="fullName">
							</div>
						</div>
						<div class="form-group">
							<label for="edit_customerFrom" style="float:left;padding:7px 15px 0 27px;"class="col-sm-2 control-label">类型</label> 
							<div class="col-sm-10">
								<select	class="form-control" id="factory_ctype" placeholder="类型" name="ctype" >
                                   <option>请选择</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="edit_custIndustry" style="float:left;padding:7px 15px 0 27px;"class="col-sm-2 control-label">简称</label>
							<div class="col-sm-10"> 
							<input type="text" class="form-control" id="factory_factoryName" placeholder="简称" name="factoryName">
							</div>
						</div>
						<div class="form-group">
							<label for="edit_custLevel" style="float:left;padding:7px 15px 0 27px;"class="col-sm-2 control-label">联系人</label>
							<div class="col-sm-10">
							<input type="text" class="form-control" id="factory_contacts" placeholder="联系人" name="contacts"/>
						     </div>
						</div>
						<div class="form-group">
							<label for="edit_linkMan" class="col-sm-2 control-label"class="col-sm-2 control-label">联系电话</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="factory_mobile" placeholder="联系电话" name="mobile">
							</div>
						</div>
						<div class="form-group">
							<label for="edit_phone" class="col-sm-2 control-label" class="col-sm-2 control-label">传真</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="factory_fax" placeholder="传真" name="fax">
							</div>
						</div>
						<div class="form-group">
							<label for="edit_mobile" class="col-sm-2 control-label" class="col-sm-2 control-label">备注</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="factory_cnote" placeholder="备注" name="cnote">
							</div>
						</div>
						<div class="form-group">
							<label for="edit_zipcode" class="col-sm-2 control-label" class="col-sm-2 control-label">状态</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="factory_state" placeholder="状态" name="state">
							</div>
						</div>

					</form>
				</div>
				<div class="modal-footer" >
					<button type="button" class="btn btn-default" data-dismiss="modal" style="height: 40px" onclick="refurbish()">关闭</button>
					<button type="button" class="btn btn-primary" onclick="updatefacory()" style="height: 40px">保存修改</button>
				</div>
			</div>
		</div>
	</div>

这是弹窗的代码，用到bootstrap组建

通过

<button class="btn btn-mini btn-warning"><a  href="#" data-toggle="modal" data-target="#customerEditDialog" onclick="update(${list.factoryId})"><i class="icon-star"></i> 修改</a></button>

获得id，jquery传值给ajax，

function update(id) {
			$.ajax({
				type:"get",
				url:"<%=basePath%>factoryC/keyWord.ation",
				data:{"id":id},
				success:function(data) {
				alert(data.factoryId);
					$("#factory_id").val(data.factoryId);
					
					$("#factory_ctype").val(data.ctype);
					$("#factory_factoryName").val(data.factoryName)
					$("#factory_contacts").val(data.contacts)
					$("#factory_mobile").val(data.mobile);
					$("#factory_fax").val(data.fax);
					$("#factory_cnote").val(data.cnote);
					$("#factory_state").val(data.state);
					$("#factory_fullName").val(data.fullName);
			          
					 var selOpt = $("#factory_ctype option");
                     selOpt.remove();
                     $("#factory_ctype").append("<option value='"+value+"'"+config+">"+"请选择"+"</option>");
			       <c:forEach items="${sysCodeBList}" var="sysCodeb">
			       var config=null;
			        var value="${sysCodeb.sysCodeId}";
		             var text="${sysCodeb.name}";
		             
		             if("${sysCodeb.sysCodeId}"==data.ctype){
			         var config="selected";
			        }
			        
			         $("#factory_ctype").append("<option value='"+value+"'"+config+">"+text+"</option>");
                  </c:forEach> 
				
				

				
				},error:function(XMLHttpRequest, textStatus, errorThrown){
				alert("失败");
				  alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
				}
			});
		}

传值给后台

	@RequestMapping("/keyWord.ation")
	@ResponseBody
	public FactoryC showKeyWord(String id,Model model){
		FactoryC factoryC = iFactoryCService.selectById(id);
		return factoryC;
	}

获得factory回传，这里用到@responsebody，传值可以用alert（）看值，ajax有个error：function（XXX三个参数）可以看到是什么错误，4表示传值到页面了

这里有个问题，select标签是不能传值过来，因为用的是弹窗，不是提交表单，后天用到的model是不起作用的，

这里的jstl的<c>标签也是在服务端有效果，如果用到<c:if test="">判断的话，只能是用到el语言，el也是服务端语言，如果是用到jquery的值是做不到的，js，html都是作用到客户端的，这样就无法用服务端去判断，只能用jquery的if判断

  $("#factory_ctype").append("<option value='"+value+"'"+config+">"+"请选择"+"</option>");
			       <c:forEach items="${sysCodeBList}" var="sysCodeb">
			       var config=null;
			        var value="${sysCodeb.sysCodeId}";
		             var text="${sysCodeb.name}";
		             
		             if("${sysCodeb.sysCodeId}"==data.ctype){
			         var config="selected";
			        }
			        
			         $("#factory_ctype").append("<option value='"+value+"'"+config+">"+text+"</option>");
                  </c:forEach>

这里用到<c:foreach>,和el，在服务器先执行，jquery判断是否在添加config，这样必须要开始循环的时候设置config=null；因为一旦config=selected，没有config=null，那config=永远就是selected,下面都得option标签都是被选定，也就没有选定的效果了，jquery的append的方法每次执行的，都在添加，这样当你去点击修改按钮是，就是启动再次添加，这样的话，必须开启动时清除

这样就要用到

 var selOpt = $("#factory_ctype option");
                     selOpt.remove();

让循环添加就一次

这是回显

修改完用

			<div class="modal-footer" >
					<button type="button" class="btn btn-default" data-dismiss="modal" style="height: 40px" onclick="refurbish()">关闭</button>
					<button type="button" class="btn btn-primary" onclick="updatefacory()" style="height: 40px">保存修改</button>
				</div>

js双击事件跳到

这里有个是关闭，用到了重载

window.location.reload();

function updatefacory(){
		alert("启动");
		if(confirm('确实更新客户信息吗?')){
		$.post("<%=basePath%>factoryC/updatefactory.action",$("#edit_factory_form").serialize(),function(data){
		alert("客户信息更新成功！")
		window.location.reload();
		}
		);
		}
		};		
	function refurbish(){
	window.location.reload();
	}

这样就自动重载页面，页面修改的东西就看的见了