Question

我有一个select元素，该元素使用th：each列出存储库中的所有对象，我需要选择其中一个对象并将选定项目的ID发送给控制器。

这是HTML的代码段

<form th:action="@{/checkApiMethods}" th:object="${bmonitor}" method="post">
    <input type="hidden" th:field="*{objectId}" />
        <div class="row">
            <div class="col">
                <select th:field="*{domainName}" class="custom-select mr-sm-2">
                    <option th:each="bmonitor : ${bmonitors}" th:value="${{bmonitor.domainName}}"
                            th:text="${bmonitor.domainName}">
                    </option>
                </select>
            </div>
        </div>
</form>

我尝试在选项中添加一个字段，但是它不起作用。

Answer 1

您可以使用jQuery和Thymeleaf th:data标签解决此问题。 th:data允许您将任何动态数据标签添加到元素中。该标签将保存每个 bmonitor 的ID，并且每当select的值更改时，我们都会设置隐藏输入的值，该值也将发布到您的控制器中。

HTML

<form th:action="@{/checkApiMethods}" th:object="${bmonitor}" method="post">
    <input type="hidden" th:field="*{objectId}" />
        <div class="row">
            <div class="col">
                <select th:field="*{domainName}" class="custom-select mr-sm-2">
                    <option th:each="bmonitor : ${bmonitors}" th:value="${bmonitor.domainName}"
                            th:text="${bmonitor.domainName}">
                            th:data="${bmonitor.id}"
                    </option>
                </select>
                <input name="bmonitor-id" id="bmonitor-id" hidden="hidden" value=""/>
            </div>
        </div>
</form>

jQuery

$('.custom-select').on('change', function() {
    var id = $(this).attr('data');
    $('#bmonitor-id').val(id);
})

// We must set the initial value, otherwise it will be null for the first option.
$('#bmonitor-id').val($('.custom-select option:selected').attr('data'));

当然，您需要向控制器添加@RequestParam才能捕获新输入。

thymeleaf-所选选项的通过ID

1 个答案: