动态可编辑表单项

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

方案1-input

输入就完事了

缺陷:要输入,麻烦

html 复制代码
<form>
  <label for="recipient-name">发给:</label>
  <input type="text" id="recipient-name">
</form>

方案2-select

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

缺陷:只能选择,无法自定义对象

html 复制代码
<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

html 复制代码
<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>
  
相关推荐
网络点点滴34 分钟前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
Rubin931 小时前
浏览器一帧做些什么?
html
G等你下课1 小时前
如何进行DOM操作?
javascript·html
然我2 小时前
打工人必看!Flex “驯服” 前端面试,让代码像整理工位一样顺
前端·面试·html
veminhe9 天前
HTML5 浏览器支持
前端·html·html5
訾博ZiBo10 天前
开源分享:我开发了一个智能文本提取浏览器插件,彻底解决复制粘贴的烦恼
前端·react.js·html
A5资源网10 天前
为WordPress 网站创建一个纯文本网站地图(Sitemap)
前端·数据仓库·html·php
伍哥的传说10 天前
Node.js爬虫 CheerioJS ‌轻量级解析、操作和渲染HTML及XML文档
爬虫·node.js·html
gavin_gxh11 天前
倒计时 效果
前端·css·html
白话11 天前
Vue2批量生成二维码并下载
javascript·html