动态可编辑表单项

最新推荐文章于 2025-12-30 15:17:26 发布

原创最新推荐文章于 2025-12-30 15:17:26 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #thymeleaf

本文讨论了在业务场景中，为实现用户向指定对象发送私信的功能，比较了三种方式：直接输入、下拉选择和结合datalist的输入选择。方案2和3提供了动态选项，但各有局限性：方案2限制用户只能选择，方案3允许自定义但依赖于后端数据。

遇到的问题：业务需要用户输入对应的username以发送私信给指定对象

方案1-input

输入就完事了

缺陷：要输入，麻烦

<form>
  <label for="recipient-name">发给：</label>
  <input type="text" id="recipient-name">
</form>

方案2-select

thymeleaf模板动态获取后端usernames列表供用户选择

缺陷：只能选择，无法自定义对象

<form>
  <label for="recipient-name">发给：</label>
  <select type="text" id="recipient-name">
    <option th:each="list:${usernames}"
    th:value="${list.username}" th:utext="${list.username}"></option>
    </select>
</form>

方案3-datalist

通过datalist获取和thymeleaf动态获取后端的usernames列表

用户既可以通过input输入username，也可以选择name

<form>
  <label for="recipient-name">发给：</label>
  <input type="text" id="recipient-name" list="usernames"/>
  <datalist id="usernames">
    <option th:each="list:${usernames}"
    th:value="${list.username}" th:utext="${list.username}"></option>
  </datalist>
</form>