Thymeleaf + Spring Boot + HTML +遍历列表中的列表

Question

我对这个Spring Boot + Thymeleaf很陌生。 很抱歉，如果重复此问题，但我找不到任何答案。

这是一些代码示例：

public class PersonPOJO {
        private String uniqID;
        private List<AddressPOJO> addresses;
        // And Some other fields and setters and getters 
        private List<String> someList;
}

public class AddressPOJO {
        private String uniqAddId;
        private List<String> someList;
       // And Some other fields and setters and getters 
}

我省略了URL映射和配置注释。 请多多包涵。

public class ControllerClass {
         public String htmlLoadMethod(Model model) {
              // personsList is List<PersonPOJO>. I'm having them from global.
              model.addAttribute("persons", personsList);
              return "viewName";
         }
}

现在进入我的HTML页面：假设“ viewName”

 <form action="#"> <select required="required"> <option th:each="person : ${persons}" th:value="${person.uniqID}" th:text="${person.uniqID}"></option> </select> <select> <!-- Load addresses (uniqAddIds) of the specific person I've selected in first select BOX --> </select> <select required="required"> <!-- Load list of Strings of the specific addresses I've selected in addresses select BOX --> </select> </form> 

这里还有一个问题，有时候我确实在某些PersonPOJO中使地址列表为空。 在这种情况下，应禁用地址选择框。 并且PersonPOJO的someList应该加载到第三个选择BOX中。

希望你理解这个问题。 一个没有JS的简单代码将受到更多的赞赏，但是如果有必要，我们可以拥有JS函数。 先感谢您。

Answer 1

好的，我可以考虑两种方法，但是两者都需要一些JS。 最简单的方法是发送Ajax请求并获取地址列表。 首先，对您的html进行一些修改，我们需要添加一些ID以使其更容易。

<form action="#">
    <select id="persons" required="required">
       <option th:each="person : ${persons}" th:value="${person.uniqID}" th:text="${person.uniqID}"></option>
    </select>
    <select id="addresses">
        <!-- Load addresses (uniqAddIds) of the specific person I've selected in first select BOX -->
     </select>
   <select required="required">
        <!-- Load list of Strings of the specific addresses I've selected in addresses select BOX -->
   </select>
</form>

现在，我们向选择的人添加一个on change功能。

$('#persons').on('change', function() {
    var value = $(this).val();
    $.ajax({
        url: '/get-address',
        data: {personId: value},
        type: 'GET',
        success: function(address) {
            var addressList = $('$addresses');
            // Clear old data.
            addressList.empty();
            // Iterate through all the fetched addresses and append them.
            $.each(address, function() {
               addressList.append('<option value="'+address.uniqAddId +'"></option>');
            });
        }, error: function() {
            alert("Error loading the addresses.");
        }
    }) 
});

现在，您需要在控制器中添加一个看起来像这样的新方法。

@RequestMapping(value = "/get-addresses", method = RequestMethod.GET)
@ResponseBody
public List<Addresses> fetchAddresses(@RequestParam("personId") String personId) {
    // Fetch the addresses using the person's id.
    return addresses;    
}

另一种方法是使用Thymeleaf片段实现，但是对于您的情况，我相信这种方法会更容易。 无论哪种方式，都需要JS。 希望能帮助到你。