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

Question

我目前有一个选择下拉框，根据所选选项显示多个输入文件浏览器之一（每个浏览器仅允许“.txt”、“.cvs”等之一）。我想根据所选选项更改表单的操作，以便我可以在控制器端以不同的方法处理每种情况。

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

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

我正在为百里香尝试以下操作，但没有成功：

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

提前致谢。

Answer 1

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

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

由于表达式已被注释掉，因此在静态显示页面时模板仍然有效。

当计算表达式时，Thymeleaf 将自动删除表达式后面的任何代码。

数据属性

另一种选择是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);
});