春季启动百里香叶根据其他下拉列表选择填充下拉列表

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

我有一个Unit班，一个Size班和一个City班。用户必须首先从国家/地区下拉列表中选择一个国家/地区，然后直辖市列表将仅显示该国家/地区的直辖市，之后用户必须选择一个城市大小，最后，用户必须从所选大小的城市列表中选择一个城市，并属于选定的直辖市和国家。

我的代码：

单位.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;
}

单位类型.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
}
}

城市规模.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
}
}

城市.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;
}

事件.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;
}

事件控制器.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";
}
}

城市搜索.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 类，因为到目前为止我的应用程序中不需要它，但如果我现在需要它，它必须包含什么？

Spring Boot 和 Thymeleaf 在客户端无法做任何事情，但你仍然可以在没有 Javascript/JQuery 的情况下实现你想要做的事情：

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

如果你想在不重新加载页面的情况下完成同样的任务，你将不得不求助于一些客户端代码 - 这意味着Javascript/JQuery。

相关内容

最新更新

热门标签：