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

Question

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

此示例在不使用 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 会自动删除表达式之后的任何代码。

数据属性

另一种选择是在选择框的项目上使用 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);
});