在Thymeleaf中使用Select和Option

2023/05/19

1. 概述

Thymeleaf是与Spring Boot捆绑在一起的流行模板引擎。我们已经发表了几篇关于它的文章,我们强烈建议你阅读Thymeleaf系列

在本教程中,我们将学习如何在Thymeleaf中使用选择和选项标签。

2. HTML基础知识

在HTML中,我们可以构建一个包含多个值的下拉列表:

<select>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
    <option value="pear">Pear</option>
</select>

每个列表都包含选择和嵌套的选项标签。默认情况下,Web浏览器将呈现一个列表,其中第一个选项是预选的。

我们可以通过使用selected属性来控制选择哪个值:

<option value="orange" selected>Orange</option>

此外,我们可以使用disabled属性指定一个选项不可选择:

<option disabled>Please select...</option>

3. Thymeleaf

在Thymeleaf中,我们可以使用th:field属性将视图与模型绑定:

<select th:field="*{gender}">
    <option th:value="'M'" th:text="Male"></option>
    <option th:value="'F'" th:text="Female"></option>
</select>

虽然上面的示例不需要使用模板引擎,但在后面更高级的示例中,我们将看到Thymeleaf的强大功能。

3.1 没有选择的选项

在有更多选项可供选择的情况下,显示所有选项的一种简洁明了的方法是将th:each属性与th:value和th:text一起使用:

<select th:field="*{percentage}">
    <option th:each="i : ${#numbers.sequence(0, 100)}" th:value="${i}" th:text="${i}">
    </option>
</select>

在上面的示例中,我们使用了从0到100的数字序列。我们将每个数字i的值分配给选项标签的value属性,并且我们使用与显示值相同的数字。

Thymeleaf代码将在浏览器中呈现为:

<select id="percentage" name="percentage">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    ...
    <option value="100">100</option>
</select>

让我们将此示例视为创建;所以我们从一个新的表格开始,百分比值不需要预先选择。

3.2 选定的选项

假设我们想用更新功能扩展我们的表单。为了返回到先前创建的记录并使用现有数据填充表单,需要选择该选项。

我们可以通过添加th:selected属性以及一些条件来实现这一点:

<select th:field="*{percentage}">
    <option th:each="i : ${#numbers.sequence(0, 100)}" th:value="${i}" th:text="${i}"
            th:selected="${i==75}"></option>
</select>

在上面的例子中,我们想通过检查i是否等于75来预选75的值。

但是,此代码将不起作用,呈现的HTML将是:

<select id="percentage" name="percentage">
    <option value="0">0</option>
    ...
    <option value="74">74</option>
    <option value="75">75</option>
    <option value="76">76</option>
    ...
    <option value="100">100</option>
</select>

要修复它,我们需要删除th:field并将其替换为name和id属性:

<select id="percentage" name="percentage">

最后,我们会得到:

<select id="percentage" name="percentage">
    <option value="0">0</option>
    ...
    <option value="74">74</option>
    <option value="75" selected="selected">75</option>
    <option value="76">76</option>
    ...
    <option value="100">100</option>
</select>

4. 用列表填充下拉列表

现在让我们看看如何在Thymeleaf中使用列表填充下拉列表。为此,我们将在控制器中创建一个字符串列表,并将其显示在视图中。

首先,我们将创建一个控制器,其中包含一个初始化字符串列表的方法。然后我们将使用模型属性来保存我们的列表以在视图内呈现:

@RequestMapping(value = "/populateDropDownList", method = RequestMethod.GET) 
public String populateList(Model model) {
    List<String> options = new ArrayList<String>();
    options.add("option 1");
    options.add("option 2");
    options.add("option 3");
    model.addAttribute("options", options);
    return "dropDownList/dropDownList.html";
}

最后,我们可以引用我们的列表模型属性并对其进行循环,以将每个列表元素显示为下拉列表的一个选项:

<select class="form-control" id="dropDownList">
    <option value="0">select option</option>
    <option th:each="option : ${options}" th:value="${option}" th:text="${option}"></option>
</select>

5. 总结

在这篇简短的文章中,我们演示了如何在Thymeleaf中使用下拉/列表选择器。我们还讨论了预选值的一个常见陷阱,并为它制定了解决方案。

与往常一样,本教程的完整源代码可在GitHub上获得。

Show Disqus Comments

Post Directory

扫码关注公众号:Taketoday
发送 290992
即可立即永久解锁本站全部文章