通过Ajax+jquery实现的动态增加一组查询条件的实例

    我们在做信息搜索的时候，可能会需要动态的添加一组搜索条件，如下图（1），我们可能需要同时想搜索 海南省海口市秀英区 以及 山西省太原市太原理工大学 的信息，甚至更多的省市区学校的条件约束，那么，我们就需要动态地“再添加一组省市区学校条件”。点击“再添加一组省市区学校条件”，则新增了一组控件可供选择。如下图（2）。

 

图（1）

 

图（2）

           那么，在客户端的多组同样的查询条件，在服务器端通过一组组的name值去获取数据显然不够合理，更合理的做法是通过设置隐藏域，每个select元素改变了选择的值后，便触发事件将所有当前的省市区学校条件的数据拼串，在提交数据后，将隐藏域数据提交至服务器端再通过一定规则劈串便获取到了所有的查询条件数据。

         为了展示效果， 以下是我将该隐藏域type值设定为text后的结果图：

 

 

         我的拼串规则是，将省份 市 区 和 学校 的ID值通过“,”号分开，而组与组之间，也就是不同组的省市区学校条件之间通过“|”分割。当然，没有选中值的地方，当然为空串。所以以上的结果为“10,10001,100010001,|27,27001,,270010002”。

        大家注意到上图的右下角红圈的“关闭本组”了吧，这是对新增的组别里才有的功能，通过它可以关闭掉当前组的条件，显然，关闭后以前选中的条件则无效，隐藏域的串得重新拼。

 

       以上是功能的大体介绍，在这里说明一点，市和区和学校的信息都是使用AJAX技术动态地从数据库中取的。 好，下面我把以上功能的核心代码粘贴如下，由于项目所限，无法粘贴该功能以外的代码，如果你需要借鉴，请细心分析代码结构。

 

     

      JSP代码：

    <input type="text" id="allAddressMsg" style="width: 700px;"> <table style="width: 100%"> <tr> <td colspan="2"><b>信息搜索<%request.getAttribute("myProvinceList"); %></b></td> </tr> <tr id="provinceTR" class="provinceTR"> <td style="width: 20%;" class="provinceText">省份：</td> <td> <table> <tr> <td> <select id="province" class="province" οnchange="f_getCityAndCollegeList(this,'city','area','college');f_newAllAddressMsg();" name="province" style="width: 70px;"> <option value=""></option> <c:forEach var="myProvinceList" items="${myProvinceList}"> <option value="${myProvinceList.id}">${myProvinceList.named}</option> </c:forEach> </select> </td> <td style="width:50px;" class="cityText">>>市：</td> <td> <select id="city" class="city" name="city" οnchange="f_getAreaAndCollegeList(this,'area','college');f_newAllAddressMsg();" style="width: 200px;"> <option value=""></option> </select> </td> <td style="width:50px;" class="areaText">>>区：</td> <td> <select id="area" class="area" name="area" style="width: 200px;" οnchange="f_newAllAddressMsg();"> <option value=""></option> </select> </td> </tr> </table> </td> </tr> <tr id="collegeTR" class="collegeTR"> <td class="collegeText">学校：</td> <td class="closeGroupTD"> <select id="college" class="college" name="college" style="width: 300px; margin-right: 220px;" οnchange="f_newAllAddressMsg();"> <option value=""></option> </select> </td> </tr> <tr> <td colspan="2"><a href="javascript:void(0);" mce_href="javascript:void(0);" οnclick="f_addAdress();">+再添加一组省市区学校条件</a></td> </tr>

  

 

 

   JS代码：

    <mce:script type="text/javascript"><!-- //根据所选省份动态获取市和学校 并添加到对应select控件 function f_getCityAndCollegeList(obj, citySelectId, areaSelectId, collegeSelectId){ $("#" + areaSelectId).empty(); $("#" + areaSelectId).append("<option value=''></option>"); $("#" + citySelectId).empty(); $("#" + citySelectId).append("<option value=''></option>"); $("#" + collegeSelectId).empty(); $("#" + collegeSelectId).append("<option value=''></option>"); var obj_id = $(obj).val(); if(obj_id != ""){ $.ajax({ type: "GET", url: "<%=path %>/dictionary/getCityAndCollege.do", data: "provinceId=" + obj_id, success: function(msg){ var result = eval(msg); var optionString = "<option value=''></option>"; var lastOptionId; var elementCount = 0; $.each(result[0]['cityList'],function(i,n){ optionString = optionString + "<option id=" + citySelectId + "_" + n["id"] + " value='" + n["id"] + "'>" + n["named"] + "</option>"; lastOptionId = n["id"]; elementCount = elementCount + 1; }); $("#" + citySelectId).empty(); $("#" + citySelectId).append(optionString); //if(elementCount == 1){ //$("#city_" + lastOptionId).attr("selected","true"); //} var optionString = "<option value=''></option>"; var lastOptionId; var elementCount = 0; $.each(result[1]['collegeList'],function(i,n){ optionString = optionString + "<option id=" + collegeSelectId + "_" + n["id"] + " value='" + n["id"] + "'>" + n["named"] + "</option>"; lastOptionId = n["id"]; elementCount = elementCount + 1; }); $("#" + collegeSelectId).empty(); $("#" + collegeSelectId).append(optionString); //if(elementCount == 1){ //$("#college_" + lastOptionId).attr("selected","true"); //} } }); } } //根据所选市，动态获取区信息和学校信息 并添加到对应select控件 function f_getAreaAndCollegeList(obj,areaSelectId,collegeSelectId){ var obj_id = $(obj).val(); if(obj_id != ""){ $.ajax({ type: "GET", url: "<%=path %>/dictionary/getAreaAndCollege.do", data: "cityId=" + obj_id, success: function(msg){ var result = eval(msg); var optionString = "<option value=''></option>"; var lastOptionId; var elementCount = 0; $.each(result[0]['areaList'],function(i,n){ optionString = optionString + "<option id=" + areaSelectId + "_" + n["id"] + " value='" + n["id"] + "'>" + n["named"] + "</option>"; lastOptionId = n["id"]; elementCount = elementCount + 1; }); $("#" + areaSelectId).empty(); $("#" + areaSelectId).append(optionString); //if(elementCount == 1){ //$("#area_" + lastOptionId).attr("selected","true"); //} var optionString = "<option value=''></option>"; var lastOptionId; var elementCount = 0; $.each(result[1]['collegeList'],function(i,n){ optionString = optionString + "<option id=" + collegeSelectId + "_" + n["id"] + " value='" + n["id"] + "'>" + n["named"] + "</option>"; lastOptionId = n["id"]; elementCount = elementCount + 1; }); $("#" + collegeSelectId).empty(); $("#" + collegeSelectId).append(optionString); //if(elementCount == 1){ //$("#college_" + lastOptionId).attr("selected","true"); //} } }); }else{ $("#" + areaSelectId).empty(); $("#" + areaSelectId).append("<option value=''></option>"); } } var newAddressCount = 0; //目前新增过的条件组数目 function f_addAdress(){ newAddressCount = newAddressCount + 1; var p_obj = $("#provinceTR:first").clone(); //拷贝最原始的省市区信息 var c_obj = $("#collegeTR:first").clone() //拷贝最原始的学校信息 $($("#nextOfTheNewAddress")).before(p_obj); //将拷贝外部插入指定位置 $($("#nextOfTheNewAddress")).before(c_obj); var pId = "province" + newAddressCount; //新的组别信息的select控件的新ID var cId = "city" + newAddressCount; var aId = "area" + newAddressCount; var colId = "college" + newAddressCount; var pTR = "provinceTR" + newAddressCount; //新的组别信息含省市区的表格TR的ID var cTR = "collegeTR" + newAddressCount; //新的组别信息含学校的表格TR的ID var tag = false; //之前是否遍历过ID等于指定值的控件 $(".provinceTR").each(function(i,n){ if(tag && ($(n).attr("id") == "provinceTR")){ $(n).attr("id",pTR); tag = false; return null; } if($(n).attr("id") == "provinceTR"){ tag = true; } }); $(".collegeTR").each(function(i,n){ if(tag && ($(n).attr("id") == "collegeTR")){ $(n).attr("id",cTR); tag = false; return null; } if($(n).attr("id") == "collegeTR"){ tag = true; } }); $(".province").each(function(i,n){ if(tag && ($(n).attr("id") == "province")){ $(n).attr("id",pId); $("#" + pId).removeAttr("onchange"); $("#" + pId).attr("value",""); tag = false; return null; } if($(n).attr("id") == "province"){ tag = true; } }); $(".city").each(function(i,n){ if(tag && ($(n).attr("id") == "city")){ $(n).attr("id",cId); $("#" + cId).removeAttr("onchange"); $("#" + cId).attr("value",""); tag = false; return null; } if($(n).attr("id") == "city"){ tag = true; } }); $(".area").each(function(i,n){ if(tag && ($(n).attr("id") == "area")){ $(n).attr("id",aId); $("#" + aId).attr("value",""); tag = false; return null; } if($(n).attr("id") == "area"){ tag = true; } }); $(".college").each(function(i,n){ if(tag && ($(n).attr("id") == "college")){ $(n).attr("id",colId); $("#" + colId).attr("value",""); tag = false; return null; } if($(n).attr("id") == "college"){ tag = true; } }); $(".provinceText:last").text("省份" + newAddressCount); $(".cityText:last").text(">>市" + newAddressCount); $(".areaText:last").text(">>区" + newAddressCount); $(".collegeText:last").text("学校" + newAddressCount); //给新组别的省份控件绑定事件 $("#" + pId).change(function(){ f_getCityAndCollegeList(this, cId, aId, colId); f_newAllAddressMsg(); }); $("#" + cId).change(function(){ f_getAreaAndCollegeList(this,aId,colId); f_newAllAddressMsg(); }); //添加”关闭本组“功能按钮 $(".closeGroupTD:last").append("<a href="javascript:viod(0);" mce_href="javascript:viod(0);" οnclick='f_colseAddressGroup(" + newAddressCount +");'>关闭本组</a>"); } //关闭本组功能函数 function f_colseAddressGroup(groupId){ $("#provinceTR" + groupId).remove(); $("#collegeTR" + groupId).remove(); f_newAllAddressMsg(); } //拼条件信息串函数 function f_newAllAddressMsg(){ var addStr = ""; for(var i=0; i <= newAddressCount; i++){ if(i==0){ addStr = addStr + $("#province").val() + "," + $("#city").val() + "," + $("#area").val() + "," + $("#college").val(); }else{ //如果存在该地址控件，为了过滤增加组后又被关闭掉的组 if($("#province" + i).is("select")){ addStr = addStr + "|" + $("#province" + i).val() + "," + $("#city" + i).val() + "," + $("#area" + i).val() + "," + $("#college" + i).val(); } } } //将值更新到隐藏域 $("#allAddressMsg").val(addStr); } // --></mce:script>   

 

 

 

获取市区学校信息的ACTION代码：

CityAction.java-------

 public void getCityAndCollegeByProvince_ajaxJsp() throws IOException{ HttpServletResponse response = ServletActionContext.getResponse(); HttpServletRequest request = ServletActionContext.getRequest(); response.setCharacterEncoding("utf-8"); String provinceId = request.getParameter("provinceId"); Province province = new Province(); province.setId(provinceId); List<City> cl = cityDao.getCityByProvince(province); Province province2 = new Province(); province2.setId(provinceId); List<College> col = collegeDao.queryByProvince(province2); StringBuilder builder = new StringBuilder(); builder.append("[{cityList:["); for(int i = 0 ; i < cl.size(); i++) { builder.append("{id:'"+ cl.get(i).getId() +"',named:'" + cl.get(i).getNamed() + "'}"); if(i < cl.size() - 1) { builder.append(","); } } builder.append("]},{collegeList:["); for(int i = 0 ; i < col.size(); i++) { builder.append("{id:'"+ col.get(i).getId() +"',named:'" + col.get(i).getNamed() + "'}"); if(i < col.size() - 1) { builder.append(","); } } builder.append("]}]"); response.getWriter().write(builder.toString()); }   

 

 

AreaAction.java------

  public void getAreaAndCollegeByCity_ajaxJsp() throws IOException{ HttpServletResponse response = ServletActionContext.getResponse(); HttpServletRequest request = ServletActionContext.getRequest(); response.setCharacterEncoding("utf-8"); String cityId = request.getParameter("cityId"); City city = new City(); city.setId(cityId); List<Area> al = areaDao.queryByCity(city); City city2 = new City(); city2.setId(cityId); List<College> col = collegeDao.queryByCity(city2); StringBuilder builder = new StringBuilder(); builder.append("[{areaList:["); for(int i = 0 ; i < al.size(); i++) { builder.append("{id:'"+ al.get(i).getId() +"',named:'" + al.get(i).getNamed() + "'}"); if(i < al.size() - 1) { builder.append(","); } } builder.append("]},{collegeList:["); for(int i = 0 ; i < col.size(); i++) { builder.append("{id:'"+ col.get(i).getId() +"',named:'" + col.get(i).getNamed() + "'}"); if(i < col.size() - 1) { builder.append(","); } } builder.append("]}]"); response.getWriter().write(builder.toString()); }

 

 

 

 

 

------------------------------------------

          以上就是核心代码，也许有朋友会问，为什么会有这样的代码：

$(".province").each(function(i,n){ if(tag && ($(n).attr("id") == "province")){ $(n).attr("id",pId); $("#" + pId).removeAttr("onchange"); $("#" + pId).attr("value",""); tag = false; return null; } if($(n).attr("id") == "province"){ tag = true; } });

     

          这里不是要查询最后一个id为province的元素吗，那么直接 $("#province:last") 不就行了吗？是的，我也曾经想过并尝试过，但是结果是无法正确实现的，每次都是前一个元素的ID值被改了，而不是新增的。所以我换成了这种办法去实现。有更好解释和办法或者有其他疑问的朋友欢迎前来交流。

----------------------

欢迎大家加入我创建的Java魔鬼编程QQ群，群号：253042038 

专注Java开发及其相关领域技术。致力于多线程、大并发、高性能、海量数据研究和学习。欢迎加入一起学习讨论。

 个人博客地址：http://wangchongan.com