JQuery级联下拉框的实现

最新推荐文章于 2019-10-17 16:28:00 发布

C_H_B

最新推荐文章于 2019-10-17 16:28:00 发布

阅读量531

点赞数

本文链接：https://blog.csdn.net/CHBSRZF/article/details/48174467

版权

<html>
<head>
    <title>卡激活 </title>
	<meta charset="utf-8" />
</head>

<body>
    <div class="page-header">
        <h1>卡激活 <a class="btn btn-white pull-right" href="${contextPath}/manage/mdrccardinfo/index.html?configId=${configId}">返回</a></h1>
    </div><!-- /.page-header -->
    
    <div class="row">
    	<div class="col-xs-12">
    		<div class="table-search clearfix">
    			<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(this)">
	    						<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="proId" id="proId" style="width:300px;">
    							 
    						</select>  
    						<span style="color:red" id="tip_proId"></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="2000" />
    					</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>
    		</div>	
    							
			<script>
				function enterChange(obj){
				   var enterId = obj.value;
				   $("#proId").empty();
				   var option="";
			          $.ajax({
						   type : "POST",  
						   data : {
							  enterId : enterId,
							  proSize : ${template.productSize!}  
						   },
						   url : "${contextPath}/manage/product/getProductsAjaxBySizeEnterId.html",
						   dataType : "json", //指定服务器的数据返回类型，
						   success : function(data){
						   	 $.each(data, function(k, v){  
                					option += "<option value=\"" + v['id'] + "\">" + v['name'] + "</option>";  
            					}); 
							$("#proId").append(option); 
						   },
						   error:function(){     
		                      var message= "查询失败，请稍后尝试";
							  var remainNum= 0;
				              $("#acvivatableMsg").html(message);
				              $("#acvivatableNum").val(remainNum);
		                   }   
					  });
				};
				

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

				 $("#table_validate").submit();
  			  }

			
			</script>
        </div>
    </div>
</body>
</html>

/**
	 * 
	 * @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;
		}
		
		Map<String, Object> params = new  HashMap<String, Object>();
		
		params.put("id", enterId);
		params.put("size", proSize);
		
		List<Product> products = productService.getProListByProSizeEnterId(params);
		String json = JSON.toJSONString(products);
		resp.getWriter().write(json);
	}