我有3个下拉菜单（其中一个填充城市，一个包含代理商，一个包含服务）。如果我选择一个城市，则第二个下拉列表应加载数据（代理商），如果我选择一个城市，则3个下拉列表应加载数据（服务）。我能够填充第一个下拉列表（城市），但是我不知道如何填充第二个和第三个下拉列表。

我应该为每个下拉菜单编写一个控制器并返回值吗？如果答案是肯定的，我该如何返回该值？我读过Thymeleaf不是组件技术，而是像JSP这样的模板技术。因此，Thymeleaf中没有组件或内置机制可以进行客户端-
服务器通信。因此，我需要使用简单的旧HTML表单或AJAX调用对通信进行编程。如何使用普通的旧HTML进行编程？

我尝试使用表单，但是我只单击一次提交，这不是我所需要的。我阅读了有关下拉菜单的帖子，但找不到任何有用的信息。我看到简单的方法是使用jQuery，但我不知道jQuery。有什么办法可以只使用百里香和弹簧靴吗？谢谢！我将在下面发布我的代码。

Appointment.html

<form th:action="@{/appointment/create}" method="post" id="appointmentForm">
            <input type="hidden" name="id" th:value="${appointment.id}"/>
<div class="form-group">
                <label for="location">Alege orasul:</label>
                <select class="form-control" required="required" 
th:value="${appointment.location}" name="location" id="location">
                    <option disabled="disabled" selected="selected" > -- 
alege orasul --</option>
                    <option th:each="city : ${cities}" th:value="${city.id}" 
th:text="${city.name}" ></option>
            </select>
            </div>
            </form>

            <form th:action="@{/appointment/agency}" method="post" id="appointmentForm">
            <input type="hidden" name="id" th:value="${appointment.id}"/>
            <div class="form-group">
                <label for="location">Alege agentia:</label>
                <select class="form-control" th:value="${appointment.agency}" name="agency" id="agency" required="required">
                    <option disabled="disabled" selected="selected" > -- alege agentia --</option>
                    <option th:each="agency : ${agencies}" th:value="${agency.id}" th:text="${agency.name}" ></option>

                </select>
            </div>
            </form>
            <form th:action="@{/appointment/service}" method="post" id="appointmentForm">
            <input type="hidden" name="id" th:value="${appointment.id}"/>
            <div class="form-group">
                <label for="location">Alege serviciul:</label>
                <select class="form-control" th:value="${appointment.service}" name="service" id="service" required="required">
                    <option disabled="disabled" selected="selected" > -- alege serviciul --</option>
                    <option th:each="service : ${services}" th:value="${service.id}" th:text="${service.name}" ></option>

                </select>
            </div>
            </form>

AppController.java

@Controller
@RequestMapping("/appointment")
public class AppointmentController {

@Autowired
UserService userService;    
AppointmentService appointmentService;  
CityService cityService;
AgencyService agencyService;
SerService serService;
private ModelAndView mav;

@RequestMapping(value="/create", method=RequestMethod.GET)
public String createAppointmentPost(Model model, @ModelAttribute("city") City 
city, @ModelAttribute("agency") Agency agency){


    Appointment appointment=new Appointment();
    model.addAttribute("appointment", appointment);
    model.addAttribute("dateString", "");
    model.addAttribute("cities", cityService.findAll());
    //getAllAgencies(model, city);
    getAllServices(model,agency);
    return "appointment";
}

@RequestMapping(value="/agency", method=RequestMethod.GET)
public String getAllAgencies(Model model, @ModelAttribute("city") City city){
    model.addAttribute("agencies", agencyService.listAllAgencies(city));
    return "redirect:/appointment/create";
}
public void getAllServices(Model model, @ModelAttribute("agency") Agency 
agency){
    if(agency==null){
        return;
    }
    model.addAttribute("services", serService.listAllServices(agency));

}