在 thymeleaf 上动态更改表单的操作

Question

我目前有一个 select 下拉框，根据 selected 选项。我想根据 selected 选项更改表单的操作，以便我可以在控制器端以不同的方法处理每种情况。

此示例在不使用 thymeleaf 时有效：

$("#myselect").change(function() {
    if($(this).val() == "option1"){
        $("#form").attr("action", "/processopt1");
    }
});

我正在为 thymeleaf 尝试以下方法但没有成功：

$("#myselect").change(function() {
    if($(this).val() == "option1"){
        $("#form").attr("th:action", "@{/processopt1}");
    }
});

提前致谢。

Answer 1

您必须启用 script inlining。对于要计算的 Thymeleaf 表达式，您必须使用注释掉的双括号语法：/*[[...]]*/

<script th:inline="javascript">
    var action = /*[[@{/processopt1}]]*/ '/processopt1';
    $("#myselect").change(function() {
        if($(this).val() == "option1"){
            $("#form").attr("action", action);
        }
    });
</script>

因为表达式被注释掉了，静态显示页面时模板仍然有效。

计算表达式时，Thymeleaf 会自动删除表达式后的所有代码。

数据属性

另一种选择是在 select 盒子的项目上使用 data 属性，您也可以使用 Thymeleaf 动态构建它：

<select id="myselect" th:forEach="item : ${items}>
    <option th:attr="data-action=${item.action}">${item.name}</option> 
</select>

使用此选项，您可以在将脚本更改为以下内容时避免脚本内联：

$("#myselect").change(function() {
    var action = $("#myselect option:selected").data("action");
    $("#form").attr("action", action);
});

在 thymeleaf 上动态更改表单的操作

Change a form's action dynamically on thymeleaf

html

javascript

thymeleaf