原始代码是这样的：
<div class='control-group'>
<label class='control-label' for='inputSelect'>所属单位</label>
<div class='controls'>
<select id='inputSelect' name="acCpname" onchange="updateAc()">
<c:forEach items="${list }" var="list">
<option value="${list.cpname}">${list.cpname }</option>
</c:forEach>
</select>
</div>
</div>
<div class='control-group'>
<label class='control-label'>所需印章</label>
<div class='controls' id="updateac" style="height: 40px">
<c:if test="${empty sealtables}">
<label class='radio inline'> 无可用印章，请前往申请印章 </label>
</c:if>
<c:if test="${not empty sealtables }">
<c:forEach items="${sealtables}" var="sealtable"
varStatus="status">
<label class='radio inline'> <input type='checkbox'
name="selectSealType" value='${sealtable.sealtype}' />
${sealtable.sealtype}
</label>
</c:forEach>
</c:if>
</div>
</div>
效果截图：
想要实现的效果，图片红色标记的部分，点击下拉列表，下面的复选框的值跟随下拉列表的变化而变化。
首先说一下解决思路：为下拉列表添加onchange事件，然后ajax异步提交给controller，进行数据库查询，然后返回ModelAndView，ModelAndView设置的view为一个新的jsp页面，该jsp页面里面嵌套的代码为要改变的div代码。
为下拉列表添加onchange事件：
为时间添加ajax异步刷新事件：
返回的压面直接在div中加载
<script>
function updateAc() {
$.ajax({
type : "POST",
url : '${pageContext.request.contextPath}/updateAc.action',
data : {
company : $('#inputSelect').val()
},
dataType : "html",
cache : false,
async : true,
contentType : "application/x-www-form-urlencoded;charset=utf-8",
success : function(data) {
$("#updateac").html(data);
},
error : function() {
}
});
}
</script>
提交给updateAc.action:
根据下拉列表选择的值然后从数据库中进行查找该值对应的信息返回，然后渲染comp.jsp页面
@RequestMapping(value = "/updateAc.action")
public ModelAndView updateComp(HttpServletRequest request,Model model){
ModelAndView modelAndView = new ModelAndView();
String companyname = request.getParameter("company");
List<Sealtable> sealtables = service.sealTableBySealCpName(companyname);
modelAndView.addObject("sealtables", sealtables);
modelAndView.setViewName("comp");
return modelAndView;
}
comp.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%-- <%@ include file="model.jsp"%> --%>
<div class='controls' id="updateac" style="margin-left: -20px;margin-top: -15px">
<c:if test="${empty sealtables}">
<label class='radio inline'> 无可用印章，请前往申请印章 </label>
</c:if>
<c:if test="${not empty sealtables }">
<c:forEach items="${sealtables}" var="sealtable" varStatus="status">
<label class='radio inline'> <input type='checkbox'
name="selectSealType" value='${sealtable.sealtype}' />
${sealtable.sealtype}
</label>
</c:forEach>
</c:if>
</div>
现在就可以实现页面的局部刷新。
总结
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。