使用 thymeleaf、spring boot 的动态下拉菜单

Posted 2023-02-26

【中文标题】使用 thymeleaf、spring boot 的动态下拉菜单

【英文标题】：Dynamic dropdowns using thymeleaf, spring boot

【发布时间】：2017-10-06 11:55:37

【问题描述】：

我有 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));

【参考方案1】：

所以我能够使用 jQuery 解决这个问题。

这是一个有用的链接：http://www.rockhoppertech.com/blog/spring-mvc-3-cascading-selects-using-jquery/ 我将在下面发布我的代码，也许会对某人有所帮助

-我的控制器

@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());
    return "appointment";
       

@RequestMapping(value = "/agencies", method = RequestMethod.GET)
public @ResponseBody
List<Agency> findAllAgencies(
        @RequestParam(value = "cityId", required = true) Long cityId) 
    City city = cityService.findCity(cityId);
    return agencyService.listAllAgencies(city);

-百里香

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

<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>
                </select>
</div>

jQuery- 一个下拉菜单

 $('#location').change(
        function() 
            $.getJSON("http://localhost:8181/appointment/agencies", 
                cityId : $(this).val(),
                ajax : 'true'
            , function(data) 
                var html = '<option value="">--alege agentia--</option>';
                var len = data.length;
                for ( var i = 0; i < len; i++) 
                    html += '<option value="' + data[i].nume + '">'
                            + data[i].nume + '</option>';
                
                html += '</option>';
                $('#agency').html(html);
            );
        );