select组件先已知value，再动态渲染＜option＞列表导致显示问题

最新推荐文章于 2023-04-13 19:57:23 发布
最新推荐文章于 2023-04-13 19:57:23 发布
阅读量327 收藏
点赞数 1
分类专栏： 前端 文章标签： react 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wind_waving/article/details/120687718
版权

select option的value目前只支持string类型，所以需要将option的value修改为string类型才能正确显示文本

风兮w
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js添加select下默认的option的value和text的方法
01-19
<pre name=”code” class=”java”> jsp 中的下拉框标签： <s name=”sjx” id=”sjx” list=”sjxList” listKey=”BM” listValue=”MC” size=”20″ cssStyle=”width:100%;height:70px; multiple=”true”></s> 代码如下: <pre name=”code” class=”html”> multiple=”true”意思是支持选择多个。 </pre><pre code_snippet_id=”487056″
layui动态渲染生成select的option值方法
10-16
今天小编就为大家分享一篇layui动态渲染生成select的option值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html option禁用选择 select禁用选项示例
12-14
复制代码代码如下: <select> <option value=””>1</option> <option value=””>2</option> <option value=””>3</option> <option value=””>4</option> <option value=””>5</option> </select>   我不想让用户可以选择 345 怎么办呢 复制代码代码如下: <select> <option value=””>1</option> <option value=””>2</option> <optgroup label=”3″></optgroup>
ant design 当中select组件给了value，却不显示对应的选项值的问题
木豪末的博客
03-02 7061
原因就是设置的value值跟选项的value值不相等，这里面的坑就是数据类型不一样的时候很容易引起迷惑，因为他的相等是三个等号，number和string的数字看起来一样，但实际上是不相等的，所以就找不到对应的选项值，这里很容易入坑，切记 ...
如何得到select option中的显示值
qq_45710884的博客
07-28 1038
如何得到select option中的显示值 html 片段 <select class="form-control input-sm" id="materialType2" name="materialType2" > <option value="">---请选择---</option> <option value="SG01" selected="">通信设备安装工程施工</option&
elementui select组件选中后无法自动刷新更新值渲染到页面中
weixin_33857679的博客
10-19 7235
2019独角兽企业重金招聘Python工程师标准>>> ...
下拉框 select option 从数据字典中取值
厕所里嗨单词
12-23 9888
一般前台我们写 select option，其中option中的value都是前台页面写死的。比如： 我的包包 我的本本 我的油油 我的担子 最近做一个项目，采用数据字典的方式，其好处就是以后新增选项的时候，只需要在数据库中新增一条数据，而不需要一个页面一个页面的改动。 现在从后台到前台来体现一下代码 数据
获取select标签中option的value值
seimeii的博客
01-18 1574
jsp中select标签的value总结
贺天远 廊坊师范学院信息技术提高班十五期
08-07 2184
今天遇到一个问题，就是我觉得自己明明应该获取下拉框选项的value值，但是怎么都获取不到，不管选择哪个下拉框选项获取到的id都是1。 下面是我更正之前的代码 <div class="layui-form"> <div class="demoTable"> 搜索ID： <div class="layui-inline"> <select name="PId" lay-verify="required">
在js中如何遍历List集合,并且动态渲染下拉列表数据
热门推荐
街角有人祝福,巷口有人哭~
07-06 1万+
后台: List 存的是数据 存放在model中,List下拉列表的数据,存在model中  我的需求: 页面加载完毕,要显示数据,并且下拉列表要有选项值  思路: 在js中动态渲染下拉列表,我得到的是一个List,我首先要遍历List,取到每个值,然后将每个值,添加到一个数组里,遍历数组,动态渲染           var array = new Array();        
向元素中动态添加option
08-10
NULL 博文链接：https://longying2008.iteye.com/blog/2203068
javascript 动态设置已知select的option的value值的代码
12-12
代码如下:funtion setSelectOption（a，b）{//a =>select 的id名，b=>已知option的值 for (i=0;i<$(a).length;i++) //$(a)获取a的id的简单写法，前提是必须用引用prototype.js if($(a).options[i].value == b){//...
根据时间段查询以及下拉表格动态渲染的功能实现
csssss11的博客
04-13 104
这里的时间是设置默认从当天00：00：00开始，到所查询结束的23：59：59结束。这样，通过选择起始日期和结束日期，点击搜索，就能实现对相应时间段的一个查询。这样，只要前面给的数据进行了更新，下拉框里面的数据就会跟着更新。代码是用element中DateTimePicker 日期时间。
解决react项目启动invalid host header问题
Wind_waving的博客
06-16 2493
问题描述：react create app项目在本地（localhost或127.0.0.1）环境中可以正常访问，但是部署到服务器后，可以用公网IP但不能用域名访问 解决办法： 第一种： 项目根目录新建.env.development.local文件，文件中写入：DANGEROUSLY_DISABLE_HOST_CHECK=true 需要注意git默认忽略该文件，需要在.gitignore文件中将该文件注释掉才能上传到github上 第二种： npm run eject暴露webpa.
antd TreeSelect组件显示value而非title问题
Wind_waving的博客
07-31 1468
首先，保证在给TreeSelect的value赋值时treeData中必须已经包含了该value值 还需要注意，value必须是string类型，如果使用number类型的value则会出现这个问题
解决antd mobile的长列表ListView不更新视图问题及源码浅析
Wind_waving的博客
03-14 1241
问题描述： 使用antd mobile 的listview 组件展示列表数据，每个列表项除了展示数据还有一个checkbox，整个列表上方有一个控制checkbox是否显示的按钮，当点击“显示”后，checkbox显示出来，此时上滑列表“加载更多”数据，再点击“隐藏”checkbox，此时的checkbox不消失 原因： 切换按钮状态可以触发render方法，但是由于antd-mobile对性能的优化，并不会每次都触发renderRow方法 解决方法： 需要重新设置dataSource，并且如果使用的是状态
nodejs sequelize参考及问题
Wind_waving的博客
04-14 1030
sequelize是什么 ORM：把关系数据库的表结构映射到对象上 sequelize是把对象映射到数据库中的表和数据中 sequelize的用法 从基础开始创建项目并使用： 参考廖雪峰的网站 node.js 使用 sequelize 操作数据库 （可以不用创建koa项目，直接创建app.js文件，并在其中使用立即执行函数或者其他方式进行数据库操作） 基本的操作函数 基本的操作 事务 S...
addEventListener第三个参数useCapture
Wind_waving的博客
02-09 952
参考博客addEventListener()中的第三个参数 参考博客addEventListener()第三个参数useCapture (Boolean)详细解析 总结： W3C标准中event触发的顺序：先捕获再冒泡 | | / \ -----------------| |--| |----------------- | element1 | | | | | | -------------| |--| |---------
antd mobile Datepicker使用moment设置日期后显示NaN
Wind_waving的博客
03-14 888
苹果手机只支持按照’/‘划分的日期格式，如’YYYY/MM/DD HH:mm:ss’ 当然也可以使用原生的Date设置，如设置日期为选中日期的零点：date=>new Date(new Date(date).setHours(0, 0, 0, 0))
<!DOCTYPE html> <html> <head> <title>表格形式</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> <script> // 添加一行 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); for(var i = 0; i < 5; i++){ var cell = row.insertCell(i); cell.innerHTML = '<select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>'; cell.onclick = function(){ this.firstChild.style.display = 'block'; } cell.firstChild.onblur = function(){ this.style.display = 'none'; } cell.firstChild.style.display = 'none'; } } </script> </head> <body> <table id="myTable"> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> <th>列4</th> <th>列5</th> </tr> </thead> <tbody> <tr> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> </tr> </tbody> </table> <button onclick="addRow('myTable')">增加</button> </body> </html>将这段代码用bootstrap进行优化
最新发布
04-23
Sure! 这个表格的代码可以用 Bootstrap 进行优化，具体的代码如下： <!DOCTYPE html> <html> <head> <title>表格形式</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 Bootstrap 的 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css"> <style> table { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> </head> <body> <div class="container"> <table class="table table-bordered table-hover"> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> <th>列4</th> <th>列5</th> </tr> </thead> <tbody> <tr> <td> <select class="form-control"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </td> <td> <select class="form-control"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </td> <td> <select class="form-control"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </td> <td> <select class="form-control"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </td> <td> <select class="form-control"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </td> </tr> </tbody> </table> <div class="text-center"> <button class="btn btn-primary" onClick="addRow('myTable')">增加</button> </div> </div> <!-- 引入 Bootstrap 的 JS 文件 --> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script> <script> // 添加一行 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); for(var i = 0; i < 5; i++) { var cell = row.insertCell(i); cell.innerHTML = '<select class="form-control"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>'; cell.onclick = function(){ this.firstChild.style.display = 'block'; } cell.firstChild.onblur = function(){ this.style.display = 'none'; } cell.firstChild.style.display = 'none'; } } </script> </body> </html> 我希望这个帮助到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值