基于jquery 的二级联动

最新推荐文章于 2024-07-26 03:31:50 发布

原创最新推荐文章于 2024-07-26 03:31:50 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #C #C++ #C# #json #ViewUI

ajax 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用jQuery实现网页上的二级联动效果。通过选择框的级联选择来动态加载子级选项，前端采用jQuery进行数据请求及DOM操作，后端返回JSON数据。此方法适用于需要根据上一级选项动态改变下一级选项内容的场景。

要实现一个二级联动，决定用 jquery 去实现

先来看页面上的部分

<select name="newsType" id="newsType" class="inputbg required validate-selection" >
        	<option value="">--请选择--</option>
        	<c:choose>
        		<c:when test="${!empty newsTypes}">
        			<c:forEach items="${newsTypes}" var="entity" varStatus="entityIndex">
        				<option value="${entity.id}">${entity.name }</option>
        			</c:forEach>
        		</c:when>
        	</c:choose>
        </select>
          </select>
		<select id="type" name="type" class="inputbg required validate-selection">
			<option value="">--请选择--</option>
		</select>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

$(function(){
	$("#newsType").change(function(){
		$.getJSON("news/getNewsType.action?timestamp="+new Date(),{newstype:$(this).val()},function(data){
			$("#type").get(0).options.length=1;//清一下选项，只留下第一项
			$.each(data,function(i){
				$("#type").append("<option value=\""+data[i].s_entityId+"\">"+data[i].s_entityName+"</option>");
			});
		});
	});
});

后台action

public void getNewsType()throws Exception{
		HttpServletResponse response = getResponse();
		response.setContentType("text/json; charset=GBK");
		response.setCharacterEncoding("GBK");
		PrintWriter out = response.getWriter();
		
		try {
			String unit=getParameter("newstype");
			System.out.print(unit);
			List entityList = userDAO.findEntityByParentId(unit);
			Iterator<Entity> iterator = entityList.iterator();
			String dataTemp="";
			while(iterator.hasNext()){
				Entity entity = (Entity)iterator.next();
				String name = entity.getName();
				long id = entity.getId();
				if("".equals(dataTemp)){
					dataTemp="[{s_entityId:\""+id+"\",s_entityName:\""+name+"\"}";
				}else{
					dataTemp+=",{s_entityId:\""+id+"\",s_entityName:\""+name+"\"}";
				}
			}
			dataTemp+="]";
			out.print(dataTemp);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}