基于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.s_entityId+"\">"+data.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();}}
页:
[1]