jQuery实现二级联动下拉框

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;
	}

效果：