Question

查看：
我有一个带有两个选择字段的表单：第二个只有在第一个选择中做出选择并且显示的内容是相对于第一个字段时才激活。

模型：
机构（ID，名称）
帐户（id，营业所）

逻辑：
第一个字段从Controller加载的模型属性“ 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，您可以在下拉列表中添加一个eventlistener，以查找该特定值并删除隐藏的类以显示该列表。

编辑：要过滤列表，您可以在元素上放置data attribute并根据该数据显示或隐藏项目

Thymeleaf：如何基于动态字段设置条件迭代？

1 个答案: