Thymeleaf 模板中 HashMap 的级联下拉列表

Question

我正在前端创建一个带有 Thymeleaf 模板的 Spring Boot JPA 应用程序。该应用程序用于管理一组按类别组织的用户技能。

我需要在表单中创建一个级联下拉列表，从第一个下拉列表中选择一个类别（例如编程语言、管理员、项目管理），然后第二个下拉列表显示与该类别相关的技能。因此，如果在第一个下拉菜单中选择了“编程语言”，则第二个下拉框中的选项可能是 Java、Python、C++ 等。此表单最终将用于搜索具有这些技能的用户。

在我的控制器中，我创建了一个映射，其中键是字符串形式的类别，值是相关技能的列表，其中技能类是包含技能名称和 ID 的 Java 数据对象：-

Map<String, List<Skill>> skillsMap = new HashMap();

我使用所有类别和技能信息填充此地图并将其添加到我的模型中。它包含表单中需要的所有信息：-

model.addAttribute("skillsMap", skillsMap);

在我的 Thymeleaf 模板视图中，然后我从模型中检索此地图并开始使用它构建表单。此选择成功显示类别：-

<select id="category">
    <option value="NONE">----Select----</option>
    <option th:each="entry : ${skillsMap.entrySet()}" th:value="${entry.key}"
        th:text="${entry.key}">
    </option>
</select>

我想要的行为是，在我在第一个下拉列表中选择类别后，第二个下拉列表会显示该类别中的技能作为选项。

为了实现这一点，我尝试在 JavaScript 变量中捕获类别下拉列表的值。这是在表单下方模板底部的脚本部分中：-

<script>
$(document).ready(function() {
    $("#category").change(function() {
        var cat = $("#category").val();
    });
});
</script>

我在第二个选择字段中引用了这个变量“cat”的值：-

<select id="skill">
    <option value="NONE">----Select----</option>
    <option th:each="skill : ${skillsMap.get(cat)}" th:value="${skill.id}"
        th:text="${skill.name}">
    </option>
</select>

这还没有工作，第二个下拉菜单仍然没有填充。

当我使用实际类别值（在本例中为 Admin）对第二个下拉列表进行硬编码时，它会按预期显示值：

<select id="skill">
    <option value="NONE">----Select----</option>
    <option th:each="skill : ${skillsMap.get('Admin')}" th:value="${skill.id}"
        th:text="${skill.name}">
    </option>
</select>

因此，我知道这是我试图设置和引用问题所在的“cat”变量的方式。在这个项目中使用的所有技术中，JavaScript/JQuery 方面是迄今为止我最薄弱的部分，我不确定我想要做的事情是从根本上说是错误的方法，还是我只是有一些语法问题。如果有人能指出正确的方向，我将不胜感激！

Answer 1

var data = {
  skill1: ['a', 'b'],
  skill2: ['c'],
  skill3: ['d']
}

$(document).ready(function() {
  $("#category").change(function() {
    var skill = $("#category").val();
    var optionList = "";
    var skillList = data[skill];
    for (var i = 0; i < skillList.length; i++) {
      optionList += "<option value=" + skillList[i] + ">" + skillList[i] + "</option>";
    }
    $("#skill").html(optionList);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="category">
  <option value="skill1">skill1</option>
  <option value="skill2">skill2</option>
  <option value="skill3">skill3</option>
</select>

<select id="skill">

</select>

当第一个选择发生变化时，您可以将所有选项替换为第二个选择的.html() 方法。