您的位置：首页 > Web前端 > JQuery

JQuery级联下拉框的实现

2015-09-02 10:01 651 查看 
<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"  onclick="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);
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航