flashdream8 发表于 2013-2-5 01:06:19

基于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]
查看完整版本: 基于jquery 的 二级联动