Thymeleaf模板的JS函数中能否使用Spring Model实现下拉联动？

首先明确：JS运行在客户端，Spring Model变量是服务端模板渲染阶段的变量，你可以通过Thymeleaf的JS内联功能提前把数据注入到JS变量中使用，不需要额外发请求，也可以走AJAX请求后端实时查询，两种方案如下：

方案1：预加载所有数据到前端（适合数据量小的场景） #

第一步：在模板中注入Model变量到JS全局变量 #

在页面的<script>标签中添加如下代码，开启Thymeleaf的JS内联，把areas列表序列化为JS数组：

<script th:inline="javascript">
/*<![CDATA[*/
// 渲染时Thymeleaf会自动把Java的areas列表转为JS对象数组
const allBackupAreas = /*[[${areas}]]*/ [];
/*]]>*/
</script>

第二步：修改loadTapes函数实现联动 #

function loadTapes() {
    const selectedArea = $("#backup").val();
    const $tapeSelect = $("#tape");
    $tapeSelect.empty();
    
    // 未选中区域时直接返回
    if (!selectedArea) {
        return false;
    }
    
    // 新增默认选项
    $tapeSelect.append($("<option />").val("").text("--- Select one ---"));
    
    // 找到当前选中区域对应的备份区域对象
    const targetArea = allBackupAreas.find(item => item.area === selectedArea);
    if (!targetArea || !targetArea.tapes) return;
    
    // 遍历该区域关联的磁带列表，填充下拉框
    // 假设你的Tape类有id、name属性，可根据实际字段调整取值
    targetArea.tapes.forEach(tape => {
        $tapeSelect.append($("<option />").val(tape.id).text(tape.name));
        // 如果Tape本身是字符串存储，直接用.val(tape).text(tape)即可
    });
}

方案2：AJAX请求后端查询（适合数据量大、磁带数据可能实时变动的场景） #

第一步：新增后端查询接口 #

在你的Controller中新增接口，根据区域名查询关联的磁带列表：

@GetMapping("/api/list-tapes-by-area")
@ResponseBody
public List<Tape> listTapesByArea(@RequestParam String area) {
    // 这里根据实际业务查询备份区域对应的磁带列表即可
    return backupAreaService.findByArea(area).getTapes();
}

第二步：修改loadTapes函数发请求获取数据 #

function loadTapes() {
    const selectedArea = $("#backup").val();
    const $tapeSelect = $("#tape");
    $tapeSelect.empty();
    
    if (!selectedArea) {
        return false;
    }
    
    $tapeSelect.append($("<option />").val("").text("--- Select one ---"));
    
    // 发请求查询对应区域的磁带列表
    $.get("/api/list-tapes-by-area", {area: selectedArea}, function(tapes) {
        tapes.forEach(tape => {
            $tapeSelect.append($("<option />").val(tape.id).text(tape.name));
        });
    });
}

内容的提问来源于stack exchange，提问作者Enrico Morelli