Thymeleaf: Как установить условную итерацию на основе динамического поля?

Question

Просмотр :
У меня есть форма с двумя полями выбора: второе активируется только тогда, когда сделан выбор в первом поле, а отображаемое содержимое относится к первому полю.

Модель :
Учреждение (id, name)
Аккаунт (id, Учреждение)

Логика :
Первое поле загружает список заведений из атрибута модели "etablissements", который загружает Контроллер. Второе поле должно быть активировано после того, как выбор будет сделан (легко), но затем в нем также должен быть показан список учетных записей, которые «зарегистрированы» для этого Учреждения.

Вопрос в том, как мне установить этот вид условного утверждения в тимеле, зная, что у меня есть доступ ко всем заведениям и счету в шаблоне, как показано здесь:

<form id="demo-form2" data-parsley-validate
                                    class="form-horizontal form-label-left" action="addOP"
                                    th:object="${paiement}" method="post">

                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                            for="first-name"> Compte <span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <select class="form-control" th:field="*{idCompte}">
                                                <option th:each="account : ${etablissements}"
                                                    th:text="${etablissement.name}" th:value="${etablissement.name}">Choose
                                                    Etablissement</option>
                                            </select>
                                        </div>
                                    </div>

                                        <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                            for="first-name"> Imputation <span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <select class="form-control" disabled="disabled">
                                                <option th:each="account : ${accounts}"
                                                    th:text="${account.owner}" th:value="${account.id}">Compte</option>
                                            </select>
                                        </div>
                                    </div>

Какой лучший способ сделать это, используя тимили или javascript?

PS: извините за форматирование, не нашли способа автоматически удалять эти пробелы из кода.

Answer 1

Вы все равно должны визуализировать список, используя тимелеф, и дать ему скрытый класс, который устанавливает его в display: none. Затем с помощью javascript вы можете добавить список событий в выпадающий список, который ищет это конкретное значение и удаляет скрытый класс, чтобы отобразить список.

---

Редактировать: чтобы отфильтровать список, вы можете поместить атрибут данных в элемент и показать или скрыть элемент на основе этих данных