这两天,做小项目碰到了一个问题,流程是这样的,一个下拉框控制类型,另一个下拉框根据前一个下拉框的内容变化而变化,通俗的说就是级联操作。前一个下拉框影响另一个下拉框的内容。 而在这里我主要遇到的问题是返回的List和我原来用到的完全不一样。这里直接看实例:
<!-- 机构类型 --> <div class="form-group"> <label class="col-md-3 control-label">借出用户类型:</label> <div class="col-md-4"> <select name="lend.stationType" id="stationType" class="select2_category form-control" data-placeholder="Choose a Category" tabindex="1"> <option value="">--请选择--</option> <option value="1" select="selected" >员工</option> <option value="2">监测站</option> </select> </div> </div> <!-- 机构 --> <div class="form-group"> <label class="col-md-3 control-label"><font color="red">*</font>机构:</label> <div class="col-md-4"> <select name="lend.station" id="station" class="select2_category form-control" data-placeholder="Choose a Category" tabindex="1"> <option value="">---请选择--- </option> <c:forEach var="comList" items="${companyList }"> <option value="${comList.YHBH }">${comList.YHMC }</option> </c:forEach> </select> </div> </div>这里刚进入这个页面的时候,我是直接显示员工类型和员工的姓名,如果改变类型那么下一个下拉框的内容也随之变化,通过ajax返回一个关于机构的集合。
下面是我写的js:
$("#stationType").change(function(){ var types = $("#stationType").val(); if(types != ""){ $.ajax({ type : "POST", url : "product_changeStationType.action", data : {stationType:types, t:Math.random()}, success:function(res){ var dataObj = JSON.parse(res); //var resd = eval(res["list"]); if(types == "1"){ // 公司 var opts = '<option value="" >---请选择---</option>'; for(var i = 0; i <dataObj.length; i++){ opts += '<option value="'+dataObj[i].YHBH+'">'+dataObj[i].YHMC+'</option>'; } $("#station").html(opts); } else{ if(types == "2"){ var opts = '<option value="" >---请选择---</option>'; for(var i = 0; i <dataObj.length; i++){ opts += '<option value="'+dataObj[i].BMBM+'">'+dataObj[i].BMMC+'</option>'; } $("#station").html(opts); } else{ alert("数据类型错误,请重新进入此页面"); } } }, error:function(){ alert("返回的数据类型不匹配"); } }); } })后台:
public void changeStationType(){ HttpServletRequest request = ServletActionContext.getRequest(); HttpSession session= request.getSession(); int stationType = Integer.parseInt(request.getParameter("stationType").toString()); HashMap map = new HashMap(); HttpServletResponse response = ServletActionContext.getResponse(); if(stationType == 1){ StringBuffer companySql = new StringBuffer("select t.yhbh,t.yhmc from base_yh t where t.bm='420000000001' and t.zt='1' "); companyList = (List) baseDao.loadBySql(companySql.toString(), null); this.printToJson1(companyList); } else{ if(stationType == 2){ StringBuffer sybmSql = new StringBuffer("select t.bmbm,t.bmmc from ckgl_sybm t "); sybmList = (List) baseDao.loadBySql(sybmSql.toString(), null); this.printToJson1(sybmList); } else{ //输出类型出错 this.printToJson(""); } } } public void printToJson1(List json){ HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("UTF-8"); try { JSONArray jsons = JSONArray.fromObject(json); response.getWriter().print(jsons); } catch (IOException e) { } }这里是在后台生成一个list,再转为JsonArray数组形式传给前台,老实说每次这样关于后台传前台我用过多种办法,但每次写完都不记得了,这里做一个记录,避免以后忘记了。
通过ajax,后台传给前台一个List 就用这种方式。