基于jquery 的 二级联动

 

要实现一个 二级联动， 决定用 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();
		}
	}