Thymeleaf模板中HashMap的级联下拉列表 [英] Cascading dropdown from HashMap in Thymeleaf Template

问题描述

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

I am creating a Spring Boot JPA application with Thymeleaf templates in the front end. The application is used to manage a set of user skills which are organised into categories.

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

I need to create a cascading dropdown in a form where a category (e.g. Programming Languages, Admin, Project Management) is selected from a first dropdown and then a second dropdown displays the skills associated with that category. So if 'Programming Languages' was selected in the first dropdown, the options in the second dropdown box may be Java, Python, C++, etc. for example. This form will eventually be used to perform a search of users that have those skills.

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

In my controller, I create a map where the key is the category as a String and the value is a list of associated skills, where the Skill class is a Java data object containing the skill name and id: -

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

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

I populate this map with all the category and skill information and add it to my Model. It contains all the info that will be required in the form: -

model.addAttribute("skillsMap", skillsMap);

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

In my view within a Thymeleaf template, I then retrieve this map from the model and start to build a form with it. This select successfully displays the categories: -

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

我想要的行为是，在第一个下拉列表中选择了类别之后，然后显示第二个下拉列表，其中包含该类别的技能作为选项.

The behaviour I want is that after I have made the category selection in the first dropdown, a second dropdown is then displayed with the skills from that category as options.

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

To achieve this, I have attempted to capture the value of the category dropdown in a JavaScript variable. This is in a script section at the bottom of the template below the form: -

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

我在第二个选择字段中引用此变量'cat'的值:-

I reference the value of this variable 'cat' in a second select field: -

<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>

这尚不起作用，第二个下拉列表仍未填充.

This is not yet working and the second dropdown remains unpopulated.

当我使用实际类别值(在这种情况下为Admin)对第二个下拉列表进行硬编码时，它将按预期显示值:

When I hard-code the second dropdown with an actual category value, Admin in this case, it displays the values as expected:

<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方面是我最薄弱的一环，而且我不确定我尝试做的是从根本上讲的方法错误还是语法方面的问题.如果有人能指出正确的方向，我将不胜感激！

I therefore know that it is the way I am trying to set and reference the 'cat' variable where the issue lies. Of all the technologies used in this project, the JavaScript/JQuery side of things is by far my weakest and I am not sure if what I am trying to do is fundamentally the wrong approach or if I just have some syntax issues. I would be extremely grateful if anyone could point me in the right direction!

推荐答案

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()方法替换第二个选择的所有选项.

You can replace all options with the .html() method for the second select when the first select changes.

这篇关于Thymeleaf模板中HashMap的级联下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！