Cascading Dropdown From Hashmap In Thymeleaf Template

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.

Solution 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);
  });
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><selectid="category"><optionvalue="skill1">skill1</option><optionvalue="skill2">skill2</option><optionvalue="skill3">skill3</option></select><selectid="skill"></select>

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