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

Question

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

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

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

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

我用所有类别和技能信息填充此 map ，并将其添加到我的模型中。它包含以下形式所需的所有信息:-

model.addAttribute("skillsMap", skillsMap);

在我看来，在 Thymeleaf 模板中，我从模型中检索此 map 并开始使用它构建表单。此选择成功显示类别:-

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

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

为了实现此目的，我 try catch 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() 方法替换所有选项。