Каскадный выпадающий список из HashMap в шаблоне Thymeleaf

Question

Я создаю JPA-приложение Spring Boot с шаблонами Thymeleaf во внешнем интерфейсе. Приложение используется для управления набором пользовательских навыков, которые организованы по категориям.

Мне нужно создать каскадный выпадающий список в форме, в которой категория (например, Языки программирования, Администратор, Управление проектами) выбирается изпервый выпадающий, а затем второй выпадающий показывает навыки, связанные с этой категорией. Таким образом, если «Языки программирования» были выбраны в первом раскрывающемся списке, во втором раскрывающемся списке могут быть варианты, например, Java, Python, C ++ и т. Д. Эта форма в конечном итоге будет использоваться для поиска пользователей, обладающих этими навыками.

В моем контроллере я создаю карту, где ключ - это категория в виде строки, а значение - список связанных навыков,где класс Skill - это объект данных 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() для второго выбора при изменении первого выбора.