发送从JSP中选择下拉列表的每一行的所有列（​​）

Question

我在JSP页面中有一个表格，它被包裹在表格标签中。 现在表格有3列，每行有一个下拉框可供选择。

我的问题是，当我改变下拉列表中选择值，并在窗体中单击按钮（见下表），所有该行（所有TD值）必须将数据转移到Servlet。

因此可以说，如果我将下拉值更改为可用，然后单击按钮，那么所有3列值：Java（第1列），可用（第2列）和john（第3列）都应该传输到Servlet。 我怎么可能做到这一点？

这里是我的表：

<form method="post" 
      action="${pageContext.request.contextPath}/DemoServlet" 
      class="container"> 
      <div class="panel panel-default "> 
       <!-- Default panel contents --> 
       <div class="panel-heading">Operations form</div> 
       <table class="table table-bordered"> 
        <thead> 
         <tr> 
          <th class="text-center">Title</th> 
          <th class="text-center">Status</th> 
          <th class="text-center">User</th> 
         </tr> 
        </thead> 
        <tbody> 
         <c:forEach items="${entries}" var="entry"> 
          <tr> 
           <td>${entry.title}</td> 
           <td class="text-center"><c:choose> 
             <c:when test="${entry.status == 'Reserved'}"> 
              <select name="status" id="status"> 
               <option value="${entry.status }">${entry.status }</option> 
               <option value="Available">Available</option> 
               <option value="Checkedout">Checkedout</option> 
              </select> 
             </c:when> 
             <c:when test="${entry.status == 'Checkedout'}"> 
              <select name="status" id="status"> 
               <option value="${entry.status }">${entry.status }</option> 
               <option value="Available">Available</option> 
              </select> 
             </c:when> 
             <c:otherwise> 
              ${entry.status} 
             </c:otherwise> 
            </c:choose></td> 
           <td class="text-center">${entry.username}</td> 
          </tr> 
         </c:forEach> 
        </tbody> 
       </table> 
      </div> 
      <div class="row clearfix"> 
       <div class="col-xs-2"> 
        <button type="submit" class="btn btn-primary">Update</button> 
       </div> 
      </div> 
     </form> 

在此先感谢。

Answer 1

把某种标识为数据属性上的每一行

<tr data-id="${entry.id}"> 

然后你可以使用一个变化处理程序上select元素，使Ajax调用。使用jQuery它看起来是这样的：

$('select[name=status]').change(function(){ 
    var data={ 
     id : $(this).closest('tr').data('id'), 
     name : $(this).val() 
    }; 
    $.post('path/to/server', data, function(response){ 
     /* validate server response and then do something in UI */ 
    });  
}); 

需要注意的是元素的ID必须是唯一的defintiion但你重复相同的ID在你的循环创建行元素。

参考：$.post() API Docs