Question

我目前有一个选择下拉框，显示多个输入文件浏览器之一（每个只允许其中一个＆＃34; .txt＆＃34;，＆＃34; .cvs＆＃34;依此类推）选择的选项。我想根据所选的选项更改表单的操作，以便我可以在控制器方面以不同的方法处理每个案例。

这个例子在不使用百里香时起作用：

$("#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);
});

在百里香叶上动态更改表格的动作

1 个答案: