首页 > 其他分享 >动态可编辑表单项

动态可编辑表单项

时间:2023-08-27 22:24:18浏览次数:50  
标签:usernames 单项 发给 编辑 input datalist 动态 输入

遇到的问题:业务需要用户输入对应的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>
  

标签:usernames,单项,发给,编辑,input,datalist,动态,输入
From: https://www.cnblogs.com/twfplayer/p/17660989.html

相关文章

  • Codeforces Round 889 (Div. 1)C. Expected Destruction(期望,动态规划)
    题目链接:https://codeforces.com/problemset/problem/1854/C 大致题意: 有一个集合S,和一个上界m; 现在每秒钟可以进行一次如下操作: 1:等概率的选取S中的一个元素x;2:将x从S中移走;3:如果x+1不大于m并且x+1不在S中,那么添加x+1在S里面 问期望多少秒钟后可以使得S为空集(答......
  • Makefile练习1:静态库/动态库的生成和使用
    自己动手写下Makefile,并记录备忘。工程目录如下一、生成静态库libAdd.a1、头文件add.h#include<stdio.h>intadd(inta,intb);2、源文件add.c#include"add.h"intadd(inta,intb){ return(a+b);}3、Makefile(1)入门版libAdd.a:add.o ar-rlibAdd.aad......
  • 【V4下载】VOCALOID 4.5.2 V4 Plus Alpha编辑器下载/自带BPM Analyzer/Wave Track Tra
    【V4下载】VOCALOID4.5.2V4PlusAlpha编辑器下载/自带BPMAnalyzer/WaveTrackTranscoder支持V5声库体质的Vocaloid4!Onedrive不限速网盘下载链接在下面V4FEPlus原文链接:https://blog.imikufans.fun/index.php/2023/08/27/vxzvvpabjqxzzdbawtt/......
  • 编辑距离
    题目描述设\(A\)和\(B\)是两个字符串。我们要用最少的字符操作次数,将字符串\(A\)转换为字符串\(B\)。这里所说的字符操作共有三种:删除一个字符;插入一个字符;将一个字符改为另一个字符。\(A,B\)均只包含小写字母。输入格式第一行为字符串\(A\);第二行为字符串\(B......
  • 动态内存函数
    1.为什么存在动态内存分配?我们已经掌握的内存开辟方式有:int val=20;//在栈空间上开辟四个字节char arr[10]={0};//在栈空间上开局但是上述的开辟空间的方式有两个特点1.空间开辟大小是固定的。2.数组在申明的时候,必须指定数组的长度,它所需要的内存在编译时分配。但是对于空间的需......
  • 动态库(共享库)的制作和使用
    共享库在程序编译时并不会被连接到目标代码中,而是在程序运行是才被载入.不同的应用程序如果调用相同的库,那么在内存里只需要有一份该共享库的拷贝,规避了空间浪费问题.动态库在程序运行时才被载入,也解决了静态库对程序的更新、部署和发布会带来麻烦.用户只需要更新动态库......
  • 【LeetCode动态规划#17】知道秘密的人,维护多个dp数组
    知道秘密的人数在第1天,有一个人发现了一个秘密。给你一个整数delay,表示每个人会在发现秘密后的delay天之后,每天给一个新的人分享秘密。同时给你一个整数forget,表示每个人在发现秘密forget天之后会忘记这个秘密。一个人不能在忘记秘密那一天及之后的日子里分享......
  • mongo判断某些字段上有没有索引,进行动态创建
    IndexOptions:privatebooleanbackground;privatebooleanunique;privateStringname;privatebooleansparse;privateLongexpireAfterSeconds;privateIntegerversion;privateBsonweights;privateStringdefaultLanguage;......
  • Linux 静态库和动态库
    静态库和动态库在Linux中静态库以lib作为前缀,以.a作为后缀,中间是库的名字自己指定即可,即:libxxx.a在Windows中静态库一般以lib作为前缀,以lib作为后缀,中间是库的名字需要自己指定,即:libxxx.lib生成静态链接库1将源文件进行汇编,得到.o文件,需要使用参数-c$......
  • 顺序表——动态分配和静态分配
    静态分配数组采用静态分配时,数组的大小和空间事先已经固定,一旦空间占满,再新加入数据就会溢出,导致程序崩溃。1//顺序表——静态分配2#include<stdio.h>3#defineMaxSize10//定义顺序表的最大长度45//定义6typedefstruct{7intdata[MaxSize......