Question

如何根据其他下拉列表的选择填充下拉列表？

我有一个Unit类，一个Size类和一个City类。用户必须首先从国家/地区的下拉列表中选择一个国家/地区，然后，城市列表将仅显示该国家/地区的城市，之后用户必须选择城市规模，并在其末尾选择一个城市。选定大小的城市列表中的城市，这些城市属于选定的城市和国家。

我的代码：

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

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

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

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

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

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

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

到目前为止，我的网络搜索提供了仅使用Spring boot和Thymeleaf（仅使用jQuery）无法完成的信息。由于我不了解jQuery，因此需要一些有关如何在jQuery中编写和实现该方法的说明。另外，我没有WebConfig.java类，因为到目前为止我的应用程序中不需要它，但是如果现在需要它，它必须包含什么？

Answer 1

Spring Boot和Thymeleaf不能在客户端做任何事情，但是如果没有Javascript / JQuery，您仍然可以实现您想做的事情：

您可以将所选国家/地区提交到后端，在其中计算该国家/地区可能的城市，您可以将其添加到模型中并仅显示这些城市（或禁用所有其他选项）。但是，您将必须在限制选项的每个步骤中执行此操作，这意味着每次都要重新加载页面，这可能会让人痛苦。

如果要在不重新加载页面的情况下完成相同的操作，则必须使用一些客户端代码-即Javascript / JQuery。

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

1 个答案: