在 Thymeleaf 中，如何根据当前模型对象为 HTML 选择器选择 th:selected 值？

Posted 2023-02-26

【中文标题】在 Thymeleaf 中，如何根据当前模型对象为 HTML 选择器选择 th:selected 值？

【英文标题】：In Thymeleaf, how can I choose the th:selected value for an HTML selector based on the current model object?

【发布时间】：2018-02-16 02:23:06

【问题描述】：

从下面的控制器中，我将资源值列表（即serviceRequestList）传递给模型，然后绑定一个 html 选择器（下拉菜单）。但是，在此页面上存在一个对象 ServiceRequestDO。我希望选择器默认为当前对象的值，以便在保存更改时用户不必记住最初的所有值是什么然后重置它们。有道理，对吧？是否有一些 Thymeleaf 条件可以将某些字段的当前模型对象的值与默认选择的选择器相匹配？

ServiceRequestController：

@RequestMapping(value = "edit/id", method = RequestMethod.GET)
    String GetEditDetails(Model model, Principal principal, @PathVariable("id") Long id, @Valid @ModelAttribute(value = "requestModel") RequestModel requestModel, BindingResult bindingResult, RedirectAttributes redirectAttributes)
    
        UserDO currentUser = userRepository.findOneByInitialName(principal.getName());

        // Redirect to index if user is not a manager
        if (currentUser.getRole() != Role.MANAGER) 
            return "redirect:/index";
        

        ServiceRequestDO service = serviceRequestRepository.findById(id);
        model.addAttribute("service", service);

        model.addAttribute("currentUser", currentUser);
        model.addAttribute("requestModel", new RequestModel());

        List<ServiceRequestTypeResource> serviceRequestList = serviceRequestTypeRepository.findAll();
        List<SubServiceRequestTypeResource> subServiceRequestTypeList = subServiceRequestTypeRepository.findAll();
        List<ServiceLineTypeResource> serviceLineList = serviceLineRepository.findAll();
        List<ProductTypeResource> productList = productRepository.findAll();
        List<CustomerNameTypeResource> customerNameList = customerNameRepository.findAll();
        List<LocalTeamTypeResource> localTeamList = localTeamRepository.findAll();

        serviceRequestList.sort(null);
        subServiceRequestTypeList.sort(null);
        serviceLineList.sort(null);
        productList.sort(null);
        customerNameList.sort(null);
        localTeamList.sort(null);

        /* Drop-Down List */
        model.addAttribute("serviceRequestList", serviceRequestList);
        model.addAttribute("subServiceRequestList", subServiceRequestTypeList);
        model.addAttribute("serviceLineList", serviceLineList);
        model.addAttribute("productList", productList);
        model.addAttribute("customerNameList", customerNameList);
        model.addAttribute("localTeamList", localTeamList);

        return "edit";
    

HTML：

<tr>
   <td>
      <label rel="tooltip"
         title="" data-placement="bottom" data-html="true">Service Request Type</label>
   </td>
   <td>
      <select th:name="*serviceRequestType">
         <option th:each="serviceRequestItem : $serviceRequestList"
            th:value="$serviceRequestItem"
            th:text="$serviceRequestItem"
            th:selected="$service.serviceRequestType">
         </option>
      </select>
   </td>
</tr>

例如，使用上面的模板，选择器默认为列表中的底部值，而不管当前对象模型的 $service.serviceRequestType 值如何。

【参考方案1】：

如果我理解正确，我会这样（创建一个简单的例子）：

@GetMapping("/test/id")
public String test(Model model, @PathVariable("id") long id) 
    //This part represent your serviceRequestRepository.findById(id);
    User requestedUser = new User(id, "User " + id);
    model.addAttribute("requestedUser", requestedUser);

    //List of users represent your serviceRequestTypeRepository.findAll();
    List<User> users = new ArrayList<>();
    users.add(new User(1, "User 1"));
    users.add(new User(2, "User 2"));
    users.add(new User(3, "User 3"));

    model.addAttribute("users", users);

    return "test";

你的选择看起来像这样：

<select th:name="*requestedUser">
  <option th:each="user : $users"
     th:value="$user.id"
     th:text="$user.name"
     th:selected="$requestedUser.id == user.id">
  </option>
</select>

如果您现在输入http://localhost:8080/test/2，则第二个用户被选中：

<option value="1">User 1</option>
<option selected="selected" value="2">User 2</option>
<option value="3">User 3</option>