jQuery实现二级联动下拉框

2016-12-01 19:39:18来源:CSDN作者:tianguobing人点击

jsp页面:

<div class="control-group">	        <label class="control-label"  for="techDirec">技术方向<span style="color:red">*</span></label>	        <div class="controls">	        	<select id="techDirec" name="techDirec">				  <c:forEach items="${techDirecList}" var="techDirec" >					<c:choose>				  		<c:when test="${techDirec==technicistQual.techDirec}">				  			<option value="${techDirec}" selected="selected">${techDirec}</option>				  		</c:when>				  		<c:otherwise>				  			<option value="${techDirec}">${techDirec}</option>				  		</c:otherwise>				  	</c:choose>				  </c:forEach>			   </select>			   <form:errors path="techDirec" cssClass="alert" />	        </div>	    </div>	    <div class="control-group">	        <label class="control-label"  for="certified">所获认证<span style="color:red">*</span></label>	        <div class="controls">	        	<select id="certified" name="certified">				  <c:forEach items="${certifiedList}" var="certified" >					<c:choose>				  		<c:when test="${certified==technicistQual.certified}">				  			<option value="${certified}" selected="selected">${certified}</option>				  		</c:when>				  		<c:otherwise>				  			<option value="${certified}">${certified}</option>				  		</c:otherwise>				  	</c:choose>				  </c:forEach>			   </select>			   <form:errors path="certified" cssClass="alert" />	        </div>	    </div>

$("#techDirec").on("change",function(e) {		var techDirec = $("#techDirec").val();		$("#certified").empty();		$("#certified").append('<option value="">请选择</option>');						var url = "<%=request.getContextPath()%>/view/qualification/flushCertified/" + techDirec;		$.ajax({		   url: url,		   type: "POST",		   datatype:"json",	       contentType: "application/json; charset=utf-8", 		   data: techDirec,		   success : function(data, status){			   if(status == "success"){	               $.each(data.certifiedList,function(i,item){	            	   $("#certified").append(" <option value='" + item + "'>" + item + "</option>");		           });               }	       },	        error : function() {  	             alert("error");	       }		});	});

controller层:

@ResponseBody	@RequestMapping(value="/flushCertified/{techDirec}", method=RequestMethod.POST)	public Map<String, Object> flushCertified(@PathVariable String techDirec){		List<String> certifiedList = new ArrayList<String>();		certifiedList.addAll(techAuthenticationMapper.selectAuthenticationByTechDirection(techDirec));				Map<String, Object> modelMap = new HashMap<String, Object>();  	  	modelMap.put("certifiedList", certifiedList);	  			    return modelMap;	}



效果:




最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台