下拉列表的三种实现:简单的html实现的和c:forEach遍历实现的和Ajax追加实现的

  1. 简单的html实现的
<label>班级:</label>
<select name="classid" id="classid">
	<option value="1" selected="selected">一班</option>
	<option value="2">二班</option>
	<option value="3">三班</option>
	<option value="4">四班</option>
	<option value="5">五班</option>
	<option value="6">六班</option>
</select>
  1. c:forEach遍历实现的
    这个需要在进入页面之前查询roles
//controller用addAttribute发送roles集合
List<Role> roles = roleService.queryAll();
model.addAttribute("roles", roles);
//jsp页面用${roles}获取roles,用c:forEach遍历
//controller用addAttribute发送roles集合
List<Role> roles = roleService.queryAll();
model.addAttribute("roles", roles);
//jsp页面用${roles}获取roles,用c:forEach遍历
<select name="userRole" id="userRole">
	<option value="0">--请选择--</option>
	<c:forEach items="${roles}" var="r">
	 <c:if test="${r.id == userRole}">
	  <option selected value="${r.id}">${r.roleName}</option>
	 </c:if>
	 <c:if test="${r.id != userRole}">
	  <option value="${r.id}">${r.roleName}</option>
	 </c:if>
	</c:forEach>
 </select>

  1. Ajax追加实现的
//controller层
@RequestMapping("/classes")
public Object showAll(){
	return classService.queryAll();
}
//追加select的Ajax
<script type="text/javascript">
	$.ajax({
		url:"/classes",
		data:{},
		dataType:"JSON",
		type:"POST",
		success:function(result){
			$(result).each(function(){
				var option="<option value='"+this.id+"'>"+this.cname+"</option>";
				$("#classid").append(option);
			});
		}
	});
</script>
//select
班级:
<select name="classid" id="classid">
	<option value="-1">请选择</option>
</select>
发布了33 篇原创文章 · 获赞 4 · 访问量 2153

猜你喜欢

转载自blog.csdn.net/weixin_44981510/article/details/103915101