踩坑记 - 下拉列表框动态调整option与同时赋值引起的bug

最新推荐文章于 2024-03-27 15:33:00 发布
最新推荐文章于 2024-03-27 15:33:00 发布
阅读量423 收藏
点赞数 1
文章标签： vue.js javascript css3 es6 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/grr1640610995/article/details/118419347
版权

问题描述

在开发过程中，偶尔会遇到动态调整下拉列表框select的option，并同时对下拉列表框select绑定的变量进行赋值，如果option内容太多，而赋值太快，会遇到赋值失败的问题

下拉列表框select操作展示

问题分析

原因是赋值太快，select绑定的值必须存在于option中，但此时option还在动态生成中，导致绑定值不存在于option中，赋值失败

解决方案

将赋值操作放到this.$nextTick()函数中
此函数this.$nextTick()是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数

示例代码

冲动的碧根果
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery动态产生select option下拉列表
12-11
但其中没有实现动态产生select option下拉列表。 在jQuery环境之下使用创建jQuery对象来实现动态产生，那是很方便的事情。  在数据库中准备一些数据： 存储过程： 开发ASP.NET MVC，实现程序，少不了model: 现创建一个实体Entity，即是与数据库通讯： 接下来，你可以创建获取数据集的方法，让前端jQuery执行的方法： ok,一切准备就绪。 创建一个select对象： $selectCity = $(‘<select />’).attr({ name: ‘city’, class: ‘selectcity’ }); 你可以创建一个空的option:
vue $options.data()赋值初始化数据问题
qwtt24的博客
10-29 645
问题：在data函数中如果调用了其它this上的数据，再使用this.$options.data()报错如何解决？如下 报错：当使用this.$options.data() 的时候发现this已经不指向当前组件了。。。 解决：this.$options.data.call(this) 重新绑定this，指向当前组件 ...
Ant Design Vue2 实现列表中多行下拉框根据后台获取的数据展示对应的默认选项
最新发布
hero8011的博客
03-27 575
Ant Design Vue2 实现列表中多行下拉框根据后台获取的数据展示对应的默认选项，实现这个需求的核心是数据的映射与重组，然后配置到模版中的下拉组件进行数据绑定和遍历
layui 动态加载select并option选中但没有赋值
眼泪落在琴弦的博客
02-25 615
layui 动态加载select并option选中但没有赋值 var select='dd[lay-value='+data.code+']'; $("#code").siblings("div .layui-form-select").find('dl').find(select).click();
layui框架下如何给select的option选项赋值
xjx945的博客
05-07 1万+
html代码： <select id="office" lay-filter="filter" class="layui-anim layui-anim-upbit ddl_Style" name="office" onchange="SubmitClick()" autocomplete="off" lay-search=""> <option value="">-...
CMake语法—选项（option）
生活需要深度
05-20 1707
目录 CMake语法—选项（option） 1 选项 1.1 定义 1.2 说明 2 应用注意事项 2.1 代码结构 2.2 注意事项 2.2.1 不初始化或赋为非ON的值，全部视为OFF 2.2.2 在定义语句执行后才有效；在定义之前均视为未定义（除过在CMake命令中通过-D预定义） 2.2.3 已定义option选项会存储在CMakeCache.txt中。等价于缓存变量作用。 2.2.4 如果出现同名的变量（普通或缓存变量），...
动态给select添加option失败的问题原因及解决
热门推荐
KI的博客
05-08 1万+
做作业的时候需要给给一个select标签动态添加option，但却总是不成功，刚开始我是这样写的： $("#day").options.append(new Option(i,i)); 然后发现并没有变化，查资料后才发现，如果要用jQuery给select标签动态添加option，需要这样写： $("#day").append("<option value='"+i+"'>"+i+"...
Ant design vue中的a-select在动态给option赋值之后，placeholder失效
丑小鸭变黑天鹅的博客
11-29 4556
Ant design vue中的a-select在动态给option赋值之后，placeholder失效一、问题描述二、解决办法 一、问题描述 最近做一个项目，用到了a-select，placeholder出现了问题 先看一下不起作用的代码 <a-col :md="8" :sm="24"> <a-form-item label="学院" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15, offset: 1 }
Vue下拉列表赋值不生效（页面上不刷新）
dg_xdg的博客
09-14 756
在一个table表格中，存在两个以上的下拉框，前一个选择值，后边的下拉选项都要改变。vue2对于对象的监听只是浅监听，检测不到内部变化，也就无法触发双向绑定。改变，改变完发现页面上另一个下拉框的选项没有更新。table表格的某一下拉选择列，代码如下。找到了这一行并对另一个下拉选项组。然后change触发通过。来主动触发更新，参数。
给下拉框赋值，一直赋值不上
peter的专栏
01-10 2783
事情： 需要给下拉框赋值，调试时下拉框可以赋值，如果正常则不能赋值，使用弹出框，关闭弹出框后，下拉框也能赋值成功。----问题的关键在于下拉框的延迟上。 解决： setTimeout(function(){setFieldValue('wdx',wdx);},200); 使用setTimeout操作
js获取下拉列表框option中的value和text的值示例代码
01-19
在编程过程中，我们对下拉列表框的取值很多时候都是获取option中的value，但是也有需要获取显示在页面中的值的时候，例如想获得<option value=”value”>ShowText</option>中”ShowText”，我们该如何获取呢？...
js操纵dom生成下拉列表框的方法
12-09
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=gb2312″ /> <...利用dom生成下拉列表框</title> </head> <body onload=”
bootstrap下拉列表与输入框组结合的样式调整
12-28
其中按钮还可嵌套下拉菜单（包括分裂式下拉菜单） 一、基本用法如下： <div class=input-group> <span class=input-group-addon>@ <input type=text class=form-control> <div class=input-group-btn>
使用jquery动态为option赋值
shenxiaomo1688的博客
10-13 5478
在实际开发中，存在多个下拉菜单，下一个下拉菜单选项是由上一个上拉菜单的选项决定，意即上一个下拉菜单不同的选项将会导致下一个或多个下拉菜单选项跟着改变。此时，下拉菜单的选项就不能写死了，有时需要从数据库服务器读出数据动态加载上去，此时可使用jquery动态赋值。直接上代码： function setCataList(code){ $.ajax({ type : "GET", dataType
JS给<select>的<option>赋值&JS发异步请求获取后台列表
ljheee的博客
03-11 1万+
HTML的下拉框标签里面的各个选项option，有时候不能写死，尤其在实现多个下拉框多级联动的时候，后继的option往往需要动态添加。 动态添加option主要有2种：一是用JS添加静态数据，第二种是需要从servlet等后台获取特定的列表，再给赋值。 一、用JS添加静态数据到option 1、JS方式： var selid =document.getElementById("sltid
antd select 赋值的注意事项，值赋不上的解决方案（必须类型相同才可以）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-17 5335
react antd select 注意事项 及踩坑
jstl实现对<option>的赋值
Rocky_Yu
10-11 1637
今天在看视频的时候遇到了一个要对&lt;option&gt;标签进行默认赋值的问题：视屏中的代是这样的： &lt;option &lt;c:if test="${news.newsType==\"html\"}"&gt;selected&lt;/c:if&gt; value="html"&gt;html&lt;/option&gt; &lt;option &
options接收到数据，但是下拉框组件未显示值，实际上是=和push赋值的区别
gjylalaland的博客
10-18 553
VUE，options接收到数据，但是下拉框组件未显示值
js 下拉列表框动态数据
12-27
下面是使用JavaScript实现下拉列表框动态数据的方法： 1. 添加数据项到下拉列表框： ```javascript var select = document.getElementById("mySelect"); // 获取下拉列表框元素 var option = document....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值