Spring Boot Thymeleaf根据其他下拉列表选择填充下拉列表

Question

How can I populate a dropdown list based on selections of other dropdown lists? 如何根据其他下拉列表的选择填充下拉列表？

I have a Unit class, a Size class and a City class. 我有一个Unit班，一个Size班和一个City班。 The user must first select a country from a dropdown list of countries, the municipalities list will then display only the municipalities in that country, after that the user must select a city size, and at the end of it all, the user must select a city from a list of cities which are of the selected size, and belong to the selected municipality and country. 用户必须首先从国家/地区的下拉列表中选择一个国家/地区，然后，城市列表将仅显示该国家/地区的城市，之后用户必须选择城市规模，并在其末尾选择一个城市。选定大小的城市列表中的城市，该列表属于选定的城市和国家。

My code: 我的代码：

Unit.java 单元库

public class Unit {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable=false)
    private String name

    @ManyToOne
    @JoinColumn
    @ToString.Exclude
    private UnitType unitType;

    @OneToOne
    @JoinColumn
    private Unit unit;

    @OneToMany(mappedBy = "unit", cascade = CascadeType.ALL)
    private Set<City> cities;
}

UnitType.java UnitType.java

public class UnitType {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable=false)
    @Enumerated(EnumType.STRING)
    private UnitName uName;

    @OneToMany(mappedBy = "unitType", cascade = CascadeType.ALL)
    private Set<Unit> units;

    public enum UnitName {

        COUNTY, MUNICIPALITY
    }
}

CitySize.java CitySize.java

public class CitySize {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(name="naziv", nullable=false)
    @Enumerated(EnumType.STRING)
    private Size name;

    @OneToMany(mappedBy = "citySize", cascade = CascadeType.ALL)
    private Set<City> sizes;

    public enum Size {

        SMALL, MEDIUM, LARGE
    }
}

City.java City.java

public class City {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable=false)
    private String name;

    @ManyToOne
    @JoinColumn
    @ToString.Exclude
    private CitySize citySize;

    @ManyToOne
    @JoinColumn
    @ToString.Exclude
    private Unit unit;

    @OneToMany(mappedBy = "city", cascade = CascadeType.ALL)
    private Set<Event> events;
}

Event.java Event.java

public class Event {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable=false)
    private String name;

    @Column(nullable=false)
    private LocalDateTime time;

    @ManyToOne
    @JoinColumn
    @ToString.Exclude
    private City city;

}

EventController.java EventController.java

public class EventController {

    ....
    @GetMapping("/citySearch")
    public String citySearch(Model model) {

        model.addAttribute("event", new Event());
        model.addAttribute("unit", new Unit());
        model.addAttribute("citySize", new CitySize());
        model.addAttribute("counties", unitRepository.findByUnitTypeId(50001L));
        model.addAttribute("municipalities", unitRepository.findByUnitTypeId(50002L));
        model.addAttribute("sizes", CitySize.Size.values());
        model.addAttribute("cities", cityRepository.findAll());

        return "citySearch";
    }

    @PostMapping("/citySearch")
    public String citySearch(Event event, Model model, City city, Unit unit,
        CitySize citySize) {

        List<Event> foundEvents = eventRepository.findByCity(city);
        model.addAttribute("unit", new Unit());
        model.addAttribute("citySize", new CitySize());
        model.addAttribute("counties", unitRepository.findByUnitTypeId(50001L));
        model.addAttribute("municipalities", unitRepository.findByUnitTypeId(50002L));
        model.addAttribute("sizes", CitySize.Size.values());
        model.addAttribute("cities", cityRepository.findAll());
        model.addAttribute("foundEvents", foundEvents);

        return "citySearch";
    }
}

citySearch.html citySearch.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" >

        <title>City search</title>
    </head>
    <body>

        <h1>Event search by city</h1>

        <form th:object="${unit}" method="post">

        <div class="form-group">
                <label for="unit">County: </label>
                <select th:id="countyOption" th:field="*{unit}">
                    <option value="" >choose counties</option>
                    <option th:each="county : ${counties}" th:value="${county.id}" th:text="${county.name}"></option>
                </select>
            </div>

            <div class="form-group">
                <label for="unit">Municipality: </label>
                <select th:id="municipalityOption" th:field="*{unit}">
                    <option value="" >choose municipilaties</option>
                    <option th:each="municipality : ${municipilaties}" th:value="${municipality.id}" th:text="${municipality.name}"></option>
                </select>
            </div>
        </form>

        <form th:object="${citySize}" method="post">

        <div class="form-group">
                <label for="name">City size: </label>
                <select th:field="*{name}">
                    <option value="" >choose a city size</option>
                    <option th:each="name : ${sizes}" th:value="${id}" th:text="${name}"></option>
                </select>
            </div>
        </form>

        <form th:object="${event}" method="post">

            <div class="form-group">
                <label for="city">City: </label>
                <select th:field="*{city}">
                    <option value="" >choose cities</option>
                    <option th:each="city : ${cities}" th:value="${city.id}" th:text="${city.name}"></option>
                </select>
            </div>
            <input type="submit" th:value="Search">
        </form>

        <table>
            <tr>
                <th>Name</th>
                <th>City</th>
                <th>Time</th>
            </tr>
            <tr th:each="event : ${foundEvents}">
                <td><span th:text="${event.name}" >EVENT.NAME</span></td>
                <td><span th:text="${event.city.name}" >CITY.NAME</span></td>
                <td><span th:text="${#temporals.format(event.time, 'dd.MM.yyyy. HH:mm')}" >EVENT.TIME</span></td>
            </tr>

        </table>

        <p><a th:href="@{/search}">Return</a></p>

    </body>
</html>

So far, my web search provided information that this can't be done by using only Spring boot and Thymeleaf, only with jQuery. 到目前为止，我的网络搜索提供了仅使用Spring boot和Thymeleaf（仅使用jQuery）无法完成的信息。 Since I don't know jQuery, I would require some instructions on how to write and implement the method in jQuery. 由于我不了解jQuery，因此需要一些有关如何在jQuery中编写和实现该方法的说明。 Also, I don't have a WebConfig.java class, since I had no need for it so far in my app, but if I need it now, what does it have to contain? 另外，我没有WebConfig.java类，因为到目前为止我的应用程序中都不需要它，但是如果现在需要它，它必须包含什么？

Answer 1

Spring Boot and Thymeleaf can't do anything client-side, but you can still achieve what you are trying to do without Javascript / JQuery: Spring Boot和Thymeleaf不能在客户端做任何事情，但是如果没有Javascript / JQuery，您仍然可以实现您想做的事情：

You can submit the selected country to the backend, where you calculate the possible municipalities for that country, which you can add to the model and only display those (Or disable all other options). 您可以将所选国家/地区提交到后端，在其中计算该国家/地区的可能城市，您可以将其添加到模型中并仅显示这些城市（或禁用所有其他选项）。 However, you will have to do that for every step that limits the options, that means reloading the page everytime, which can be painful to use. 但是，您将必须在限制选项的每个步骤中执行此操作，这意味着每次都要重新加载页面，这可能会让人痛苦。

If you want to accomplish the same without reloading the page, you will have to resort to some client-side code - that means Javascript / JQuery. 如果要在不重新加载页面的情况下完成相同的操作，则必须诉诸一些客户端代码-即Javascript / JQuery。

Spring Boot Thymeleaf根据其他下拉列表选择填充下拉列表

问题描述

1 个解决方案

解决方案1
0 2019-06-03 13:02:52

Spring Boot Thymeleaf根据其他下拉列表选择填充下拉列表

问题描述

1 个解决方案

解决方案1 0 2019-06-03 13:02:52

解决方案1
0 2019-06-03 13:02:52