jQuery实现级联下拉

<form class="form-horizontal" role="form" id="table_validate" action="${contextPath}/manage/mdrccardinfo/activate.html?configId=${configId}&status=3" method="POST">
    				<input type="hidden" name="type" value="${type!}" />
					<input type="hidden" name="ids" value="${ids!}" />
					<input type="hidden" name="activateCardNums" id="activateCardNums" value="${activateCardNums!}" />
	
    				<div class="form-group">
    					<label class="col-sm-3 control-label">流量包大小</label>
    					<div class="col-sm-9">
    						<label>${template.productSize!}MB</label>
    					</div>
    				</div>
    				
    				<div class="space-4"></div>
    				<div class="form-group">
    					<label class="col-sm-3 control-label">关联企业</label>
    					<div class="col-sm-9">
    						<select name="enterId" id="enterId" style="width:300px;" onChange = "enterChange()">
	    						<option value="0" selected>请选择关联企业</option>
	    						<#if enterpriseList?? && enterpriseList?size gt 0>			
	    							<#list enterpriseList as enter>
	    								<option value="${enter.id}">${enter.name}</option>
	    							</#list>
								</#if>
    						</select>  
    						<span style="color:red" id="tip_enterId"></span>
    						<span class="help-block">营销卡激活需要与企业进行关联绑定</span>
    					</div>
    				</div>
    				
    				<div class="space-4"></div>
    				<div class="form-group">
    					<label class="col-sm-3 control-label">关联产品</label>
    					<div class="col-sm-9">
    						<select name="prdId" id="prdId" style="width:300px;" οnchange="prdChange()">
    						<option value="0">请选择关联产品</option>
    						<#if products?? && products?size gt 0>			
    							<#list products as item>
    								<option value="${item.id}">${item.name}</option>
    							</#list>
							</#if>
    						</select>  
    						<span style="color:red" id="tip_prdId"></span>
    						<span class="help-block">营销卡激活需要与对应流量包大小的产品名称关联锁定</span>
    					</div>
    				</div>
    			
    				<div class="space-4"></div>
    				<div class="form-group">
    					<label class="col-sm-3 control-label">可激活卡数目</label>
    					<div class="col-sm-9">					
    						<span id="acvivatableMsg" style="color: red"></span>   <input type="hidden" id="acvivatableNum" value="" />
    					</div>
    				</div>  
    				   			
					<div class="space-4"></div>
    				<#if list?? && (list?size > 0) >
    				<div class="form-group">
    					<label class="col-sm-3 control-label">卡序列号</label>
    					<div class="col-sm-9">
    						<#list list as item>
    						<p>${item.cardNumber}</p>
    						</#list>
    					</div>
    				</div>
    				</#if>

    				<div class="hr hr-24"></div>
    				<div class="form-group">
    					<label class="col-sm-3 control-label" ></label>
    					<div class="col-sm-9">
    						<button type="button" class="btn btn-info"  οnclick="doSubmit()">激活</button>  
    						<span style="color: red" id="errMsg">${errMsg!}</span>
    					</div>
    				</div>
    			</form>

<script>
<span style="white-space:pre">	</span>function enterChange(){
<span style="white-space:pre">		</span>$("#tip_enterId").empty(); 
	<span style="white-space:pre">	</span>$("#errMsg").empty();
	<span style="white-space:pre">	</span>var enterId = jQuery("#enterId option:selected").val();
			      
	<span style="white-space:pre">	</span>if(enterId==0){
		<span style="white-space:pre">	</span>$("#tip_enterId").append("请选择企业");
		}
		else{
			$.ajax({
			<span style="white-space:pre">	</span>type : "GET",  
				url : "${contextPath}/manage/product/getProductsAjaxBySizeEnterId.html",
				data : {
				<span style="white-space:pre">	</span>enterId : enterId,
				<span style="white-space:pre">	</span>proSize : ${template.productSize!}  
				},
				dataType : "json", //指定服务器的数据返回类型，
				success : function(data){
				<span style="white-space:pre">	</span>var listProducts = data.products;
					$("#prdId").empty();
					if(listProducts.length==0){
						$("#prdId").append("<option value=''>---该企业没有查询到相关产品---</option>");
					}
					else{
						for(var i=0;i<listProducts.length;i++){
							var id= listProducts[i].id;
							var name= listProducts[i].name;
							$("#prdId").append("<option value='"+id+"'>"+name+"</option>");
						}		
					}	    
				},
				error:function(){ 
				<span style="white-space:pre">	</span>$("#prdId").empty();    
		                      <span style="white-space:pre">	</span>var message= "查询失败，请稍后尝试";
					var remainNum= 0;
				        $("#acvivatableMsg").html(message);
				        $("#acvivatableNum").val(remainNum);
		                   }   
			}); 
		}  
	} 

	function prdChange(){  
<span style="white-space:pre">		</span>$("#errMsg").empty();
	<span style="white-space:pre">	</span>var prdId = jQuery("#prdId option:selected").val();
			       
	<span style="white-space:pre">	</span>if(prdId==0){
		<span style="white-space:pre">	</span>$("#tip_enterId").append("请选择企业");
			$("#acvivatableMsg").empty();
		}
	} 

	function doSubmit(){
		var enterId = $("#enterId").val();
		var prdId = $("#prdId").val();
		$("#errMsg").empty();
		$("#tip_enterId").empty();
		$("#tip_prdId").empty();
			     
		if(enterId == 0){
		<span style="white-space:pre">	</span>$("#tip_enterId").append("请选择企业");
			     	return;
		}
		if(prdId == 0){
			$("#tip_prdId").append("请选择产品");
			     	return;
		}
			     
		var activateCardNums = $("#activateCardNums").val();
		var acvivatableNum = $("#acvivatableNum").val();
		//alert("需要激活数目:"+activateCardNums);
		if(activateCardNums=='' || acvivatableNum=='' || Number(activateCardNums) > Number(acvivatableNum)){
		<span style="white-space:pre">	</span>$("#errMsg").append("您当前正在激活的卡数目是"+ activateCardNums + " ,超过了可激活卡数目，请重新选择关联企业");
			<span style="white-space:pre">	</span>return; 
		}

		$("#table_validate").submit();
 <span style="white-space:pre">	</span>}
</script>

/**
	 * 
	 * @Title:getProductsAjaxBySizeEnterName
	 * @Description: 根据流量包大小和企业名称查询相应的产品列表
	 * @param request
	 * @param response
	 * @param product
	 * @throws IOException
	 * @throws
	 * @author: caohaibing
	 */
	@RequestMapping(value = "getProductsAjaxBySizeEnterId")
	public void getProductsAjaxBySizeEnterId(HttpServletRequest request, HttpServletResponse resp) throws IOException{
		
		String proSize = request.getParameter("proSize");	
		String enterId=request.getParameter("enterId"); 
		
		resp.setCharacterEncoding("UTF-8");
		
		if(enterId == null ||  proSize == null){
			return;
		}
		
		HashMap<String, Object> params = new  HashMap<String, Object>(); 
		
		long id = NumberUtils.toLong(enterId);
		long size = NumberUtils.toLong(proSize);
		
		
		params.put("enterId", id);
		params.put("proSize", proSize);
		
		List<Product> products = productService.getProListByProSizeEnterId(params);
		
		for(int i=0;i<products.size();i++){
			System.out.println(products.get(i).getName());
		}
		
		Map<String, Object> map=new HashMap<String, Object>();//ajax传输的值
		map.put("products", products);
		resp.getWriter().write(JSON.toJSONString(map));
	}

Service： 注意这边的参数：Map<String, Object> map,若是用HashMap<String, Object> map，数据映射文件ProductMapper.xml中对应方法会出现字段类型转换错误。

List<Product> getProListByProSizeEnterId(Map<String, Object> map);

ServiceImpl：

public List<Product> getProListByProSizeEnterId(Map<String, Object> map) {
		return productMapper.getProListByProSizeEnterId(map);
	}

ProductMapper.java

List<Product> getProListByProSizeEnterId(Map<String, Object> map);

ProductMapper.xml

<select id="getProListByProSizeEnterId" parameterType="java.util.Map"
		resultMap="BaseResultMap">
		SELECT
		p.id, p.product_code, p.name, p.status, p.size, p.create_time, p.update_time, p.delete_flag
		
		FROM chongqing_product p left join chongqing_ent_product ep on ep.product_id = p.id,
		chongqing_enterprises e
		
		<where>
		    and p.delete_flag = 0
		    and e.delete_flag = 0
		    and ep.delete_flag = 0
		    and ep.enterprize_id = e.id
		    
		    <if test="proSize != null">
				AND p.size = #{proSize,jdbcType=BIGINT}
			</if>
			 <if test="enterId != null">
				AND e.id = #{enterId,jdbcType=BIGINT}
			</if>		
		</where>
	</select>