使用Thymeleaf動態渲染下拉框

本文將從下面幾個方面，詳細闡述如何使用Thymeleaf動態渲染下拉框：

一、Thymeleaf是什麼

Thymeleaf是一款Java模板引擎，可用於Web和非Web環境中的應用程序。它是更加現代化、易於使用且功能更強大的Java服務器端Web模板引擎。Thymeleaf能夠提供非常多的特性，例如表達式、模板繼承、條件判斷、迭代等，可用於生成動態的HTML、XML、JavaScript和CSS。

二、Thymeleaf渲染下拉框的基本語法

下面是使用Thymeleaf渲染下拉框的基本語法：

    <select th:field="${param.selectValue}">
        <option th:value="1" th:text="選項1"></option>
        <option th:value="2" th:text="選項2"></option>
        <option th:value="3" th:text="選項3"></option>
        <option th:value="4" th:text="選項4"></option>
    </select>

在這個例子中，使用Thymeleaf的th:field指令來綁定下拉框的值，th:value指明選項的值，th:text指明選項的顯示文字。這種方式非常簡單易懂，可用於靜態的下拉框渲染。

三、使用Thymeleaf渲染動態下拉框

在實際開發中，我們通常需要渲染一個動態的下拉框，選項需要根據某個條件在後端進行動態查詢，然後供前端渲染。同樣使用Thymeleaf，我們可以使用th:each指定一個迭代器，然後在迭代器中渲染選項：

    <select th:field="${param.selectValue}">
        <option value=""></option>
        <option th:each="item : ${options}" th:value="${item.id}" th:text="${item.name}"></option>
    </select>

在這個例子中，options是後端動態查詢後傳到前端的一個List，迭代器th:each指定了一個名為item的變量，使用th:value和th:text屬性來渲染選項的值和顯示文字。需要注意的是，要在第一個選項里添加一個空值，用於處理空值的情況。

四、使用Thymeleaf渲染級聯下拉框

級聯下拉框是指，當第一個下拉框選擇一個選項後，第二個下拉框的選項會動態變化，根據第一個下拉框的選項來決定。使用Thymeleaf可以很容易地實現這個功能，只需要在第一個下拉框添加一個onchange事件處理函數，來動態向後台請求需要更新的選項：

    <select id="level1" onchange="getCities()">
        <option value=""></option>
        <option th:each="item : ${level1Options}" th:value="${item.id}" th:text="${item.name}"></option>
    </select>

    <select id="level2">
        <option value=""></option>
        <option th:each="item : ${level2Options}" th:value="${item.id}" th:text="${item.name}"></option>
    </select>

    <script th:inline="javascript">
        function getCities() {
            var level1 = document.getElementById("level1");
            var level1Value = level1.options[level1.selectedIndex].value;
            var level2 = document.getElementById("level2");
            level2.options.length = 0; // 先清空options
            [[${#dates.createNow()}]];
            var url = '/cities?id=' + level1Value + '&t=' + [[${#dates.createNow()}]]; // 增加時間戳，避免緩存
            $.getJSON(url, function(data) {
                $.each(data, function(i, item) {
                    var option = new Option(item.name, item.id);
                    level2.add(option);
                });
            });
        }
    </script>

在這個例子中，使用了JavaScript和jQuery來處理動態請求數據和渲染下拉框。在onchange事件中調用getCities()函數，根據第一個下拉框的選項來動態向後台請求需要更新的選項。通過jQuery的getJSON方法發出AJAX請求，並通過each循環來動態創建選項。

總結

本文詳細介紹了如何使用Thymeleaf動態渲染下拉框，包括基本語法、動態渲染、級聯下拉框等方面，在實際開發中具有很高的實用性。Thymeleaf作為一款現代化、易於使用且功能強大的Java服務器端Web模板引擎，被廣泛應用於Web和非Web環境中的應用程序。期待本文能夠幫助讀者更好地了解和掌握Thymeleaf的相關知識。