Question

我在JSP页面中有一个表，它包含在表单标记内。现在该表有3列，每行都有一个下拉列表可供选择。

我的问题是，当我更改下拉选择值并点击表单中的按钮时（表格下方），该行的所有数据（所有必须将td值转移到 Servlet 。

因此，如果我将下拉值更改为Available并单击按钮，则所有3个列值：Java（第1列），Available（第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必须通过定义唯一，但您在循环中重复相同的ID以创建行元素。

参考：$.post() API Docs

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

1 个答案: