JQuery级联下拉框的实现

来源：互联网发布：ubuntu 16.04 legacy 编辑：程序博客网时间：2024/04/30 07:55

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

0 0