【知了堂学习笔记】利用js、ajax实现遍历行传参

一．单个下拉框

在网页中遍历出来的每行都有一个select，怎么才能将对应select选中的内容传递到各行对应的编辑（a标签）内，点击后将参数内容传递到servlet中，进行操作。

实现效果图如下：

思路：将每行的材料编号除了给材料编号那一列显示之外，同样也赋给调入仓库和编辑标签，用于区分每行不同的下拉框和a标签。通过js（window.onload）在页面加载完成后，执行，获取所有select，然后利用循环遍历出所有的下拉框，然后写出每个下拉框的onchange事件，获取编号相同的a标签，然后获取其href，然后将需要添加的参数通过字符串替换添加到a标签的href中：

window.onload = function() {var sels = document.getElementsByName("selects "); // 得到所有的select集合for(var i = 0;i < selects.length; i++) {selects [i].onchange = function() { // 事件绑定var submit = document.getElementById(this.title); // 确定按钮var url = submit.href; // urlvar index = this.selectedIndex; // 下拉框选中的索引var value = this.options[index].text; // 下拉框中值url = url.replace("&remove_newWare =", "& remove_newWare ="+value);}}}

Jsp页面表格代码：

<c:forEach items="${pb.beanList }" var="material" varStatus="i"><tr class="tableItem"><td >${material.material_id }</td><td>${material.material_name }</td><td>材料</td><td>${material.material_count }</td><td>${material.warehouse_id }</td><td>   <select name="selects" title="${material.material_id }">   <option>--请选择--</option>   <c:forEach items="${listWarehouse }" var="warehouseid">   <option value="${warehouseid.warehouse_id }">${warehouseid.warehouse_id }</option>   </c:forEach>      </select></td><td>${rcount[i.count-1] }</td><td><a href="${ctx }/removes.do?method=editRemovesMaterial&material_id=${material.material_id &remove_newWare=" id="${material.material_id }">确认</a></td> </tr></c:forEach>

这样过后，确实能将下拉框中选中的值，传到每行对应的a标签中，但是这里又发现一个问题，就是如果我第一次选择后，没有提交，而是再次选择或者多次重新选择，那么a标签中remove_newWare就会被多次替换导致，最终有多个选中的值出现在它的后面。所以这里需要改进，下面是改进后的代码。

window.onload = function() { var sels = document.getElementsByName("selects"); // 得到所有的select, 集合for(var i = 0;i < sels.length; i++) {sels[i].onchange = function() { // 事件绑定var submit = document.getElementById(this.title); // 确定按钮var url = submit.href; // urlfunction GetQueryString(name){    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");//构造一个含有目标参数的正则表达式对象    var r = url.substr(1).match(reg);//匹配目标参数    if(r!=null)return  unescape(r[2]); return null;//返回参数值}var removeNew = GetQueryString("remove_newWare");if(removeNew==null||removeNew==""){var index = this.selectedIndex; // 下拉框选中的索引var value = this.options[index].text; // 下拉框中值url = url.replace("&remove_newWare=&", "&remove_newWare="+value+"&");submit.setAttribute('href', url);}else{var index = this.selectedIndex; // 下拉框选中的索引var value = this.options[index].text; // 下拉框中值url = url.replace("&remove_newWare="+removeNew+"&", "&remove_newWare="+value+"&");submit.setAttribute('href', url);}} }

这里我先是加了一个截取参数的正则表达式GetQueryString（），可以获取对应参数的值。在下面我先截取判断a标签中的remove_newWare参数，判断它的值是否之前被添加过，如果没有，则替换；如果有则将新的值替换以前的值，这样就能保证最后remove_newWare的值只有一个。

二.多个下拉框

以上是效果图：

在实际运用中，我们还可能遇到，多个下拉框的情况，且第二个下拉框需要通过第一个下拉框的值确定，然后将第二个下拉框的值传给a标签。那么这种情况又该怎么实现呢？

思路：首先我们可以通过选择第一个下拉框中的值，将该值通过js获取，然后将获取的值通过ajax传递到servlet，通过方法查询到，相应第二个下拉框需要的值，然后通过json传到页面，然后将相应的值添加到select中，然后通过上面的方法，将值传递给对应的a标签。

但是在实际过程中，我又遇到了一个问题，就是我已经使用title和id，那么这里多了一个select，我又该怎么将编号的值给它呢，我想到了class，但是使用了class之后，我发现通过var sonselect参数并不能使用，于是我查了相关资料，知道了原来要是用class必须在后面加上对应的[]，才能使用，因为class可能有多个，使用时需要知道它的准确位置。

jsp代码：

<c:forEach items="${pb.beanList }" var="product" varStatus="i">     <tr class="tableItem"><td>${product.product_id }</td><td>${product.product_name }</td><td>产品</td><td>${product.product_count }</td><td><span>${product.warehouse_id }</span><span>${product.shelf_id }</span></td><td>    <select name="seles" title="${product.product_id }"><option>--请选择--</option><c:forEach items="${listWarehouse }" var="warehouseid"><option value="${warehouseid.warehouse_id }" id="${warehouseid.warehouse_id }">${warehouseid.warehouse_id }</option></c:forEach>       </select>    <select class="${product.product_id }" name="selesa"><option>--请选择--</option>       </select></td><td>${rcount[i.count-1] }</td><td><a href="${ctx }/removes.do?method=editRemovesProduct&remove_newShelf=" id="${product.product_id }">确认</a></td>     </tr></c:forEach>

下面是js代码：

var seles = document.getElementsByName("seles"); // 得到所有的select, 集合for(var i = 0;i < seles.length; i++) {seles[i].onchange = function() { var sonselect = document.getElementsByClassName(this.title);//确定子下拉框var index = this.selectedIndex; // 下拉框选中的索引var value = this.options[index].text; // 下拉框中值setWare(sonselect,value);var title = this.title;sonselect[0].onchange = function(){var submit = document.getElementById(title);var url = submit.href; // urlfunction GetQueryString(name){    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");//构造一个含有目标参数的正则表达式对象    var r = url.substr(1).match(reg);//匹配目标参数    if(r!=null)return  unescape(r[2]); return null;//返回参数值}var removeNew = GetQueryString("remove_newShelf");if(removeNew==null||removeNew==""){var index = this.selectedIndex; // 下拉框选中的索引var value = this.options[index].text; // 下拉框中值url = url.replace("&remove_newShelf=&", "&remove_newShelf="+value+"&");submit.setAttribute('href', url);}else{var index = this.selectedIndex; // 下拉框选中的索引var value = this.options[index].text; // 下拉框中值url = url.replace("&remove_newShelf="+removeNew+"&", "&remove_newShelf="+value+"&");submit.setAttribute('href', url);}}}}}function setWare(selectid,pid){  $.ajax({  type: "POST",  url: "${ctx}/removes.do",    data: "method=getShelfId&warehouse_id="+pid,    async: false,            success : function(msg) {             for(var i = 0;i< msg.length;i++){//创建option元素节点var opEle = document.createElement("option");$(opEle).append("<option value='"+msg[i]+"'>"+msg[i]+"</option>");//将option元素节点追加到第二个下拉列表中去$(opEle).appendTo($(selectid));}            },            dataType:"json"        });}

Servlet方法中的代码，我就不贴了，大家对以上的内容有什么疑问可以和我交流讨论。