在下拉列表更改时更改表格内容答案

【问题标题】：Change table contents upon dropdown list changes在下拉列表更改时更改表格内容
【发布时间】：2019-05-17 13:28:02
【问题描述】：

我有这个：

@GetMapping("/records")
public String getRecords(Model model) {
    model.addAttribute("tallies", getAllTallies(null));
    model.addAttribute("categories", getCategories());
    return "records";
}

getCategories() 只返回一个Categorys 的列表，getAllTallies 只返回一个所有Tallys 的列表。

如果请求的参数category 为空，那么它将返回所有计数，无论类别。但是如果它不为空，那么它将只从指定的category返回所有tallies。

这是getAllTallies：

@GetMapping("/tallies")
@ResponseBody
public List<Tally> getAllTallies(@RequestParam(required = false) String category)

然后在我的records.html:

<body>
<div>
    <select class="form-control" >
        <option value="0">Select Category</option>
        <option th:each="category : ${categories}" th:value="${category.id}" th:text="${category.category}"></option>
    </select>
</div>
<table cellpadding="10" border="1px">
    <thead>
    <tr>
        <th> Nominee </th>
        <th> Category </th>
        <th> Tally </th>
    </tr>
    </thead>
    <tbody>
    <tr th:if="${tallies.empty}">
        <td colspan="3"> No Books Available </td>
    </tr>
    <tr th:each="tally : ${tallies}">
        <td><span th:text="${tally.nominee}"> Nominee </span></td>
        <td><span th:text="${tally.category}"> Category </span></td>
        <td><span th:text="${tally.count}"> Tally </span></td>
    </tr>
    </tbody>
</table>
</body>

我想要做的是，每当我从下拉列表（类别）中选择一个新值时，表格也会根据类别而变化。我在想这是否可能没有 jquery 或 js，只有 html。但是我很难弄清楚如何通过下拉列表动态更新表格。

【问题讨论】：

您必须在每次下拉更改 (ajax) 时提出请求，

标签： javascript java spring spring-boot thymeleaf

【解决方案1】：

不，如果没有js 或jQuery，就无法实现这一目标。问题是，Thymeleaf 在服务器端工作。因此，一旦呈现，它将不会再次呈现，除非您刷新页面或使用 ajax 从服务器请求响应。在你的情况下，一个简单的ajax 就可以了。

HTML

<body>
<div>
    <select id="categories" class="form-control" >
        <option value="0">Select Category</option>
        <option th:each="category : ${categories}" th:value="${category.id}" th:text="${category.category}"></option>
    </select>
</div>
<table cellpadding="10" border="1px">
    <thead>
    <tr>
        <th> Nominee </th>
        <th> Category </th>
        <th> Tally </th>
    </tr>
    </thead>
    <tbody id="tallies">
    <tr th:if="${tallies.empty}">
        <td colspan="3"> No Books Available </td>
    </tr>
    <tr th:each="tally : ${tallies}">
        <td><span th:text="${tally.nominee}"> Nominee </span></td>
        <td><span th:text="${tally.category}"> Category </span></td>
        <td><span th:text="${tally.count}"> Tally </span></td>
    </tr>
    </tbody>
</table>
</body>

为您的类别选择和tbody 添加了 ID。

控制器

@GetMapping("/tallies")
@ResponseBody
public List<Tally> getAllTallies(@RequestParam(value = "category", required = false) String category)

为您的参数添加了一个名称。

jQuery

$('#categories').on('change', function() {
   $.ajax({
            url: '/tallies',
            type: 'GET',
            data: {
                category: $(this).val();
            },
            success: function(tallies) {
                // First, let's crear our tbody.
                $('#tallies').empty();

                // Now, let's go through each one of the tallies.
                $(tallies).each( function() {
                    // Here you should add your missing fields. I am just adding one as an example.
                    $('#tallies').append('<tr><td><span>' + this.nominee + '</span></td></tr>');
                })
            }
})

【讨论】：