thymeleaf -Pass идентификатор выбранной опции

Question

У меня есть элемент select, который использует th: каждый для вывода списка всех объектов в хранилище, мне нужно выбрать один из них, а также отправить в контроллер идентификатор выбранного элемента.

Это фрагмент 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 , и всякий раз, когда значение выбора изменяется, мы будем устанавливать значение скрытого ввода, который также будет публиковаться на вашем контроллере.

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 к вашему контроллеру, чтобы перехватить новый ввод.