Logo
技术 转载 C#

bootstrap的select动态添加option时无法正常显示

photo
Pastore Antonio

2023年10月27日

楼主是干后端的,但是最近疫情爆发,前端小组全倒了,无奈前后端都要全包,现在有一个小需求,前端要添加两个多选框,第二个多选框的选项内容根据第一个多选框的选项进行改变,但是在写完代码后,发现动态添加的新选项option没有正常显示,f12看了下源代码,是显示已经添加option标签选项了,但是就是无法正常显示,然后就上网找了下解决方法,真的是各种方法都试过了,都无法解决,然后就去公司的前端页面那去找找有没有类似的功能,参考下前端同学的写法,后面找到了,发现就算改了一样的写法也不起作用,我就去找了找select标签的样式,看看有啥区别,发现前端同学那的样式是

<select style="width:100%;height:34px;border:1px solid #e5e5e5;border-radius:4px;font-size:14px;" id="xxxx">

而我的样式是

<select class="bs-select form-control "  id="yyyy">

然后我直接将前端同学的样式复制过来,结果直接就正常显示了!!!
好家伙,原来是样式的问题,虽然说直接改样式就可以解决问题,但是楼主却想着说不改变样式呢?
既然是样式的问题,楼主就去找了找这个样式动态添加option无法显示相关的帖子,后面了解到这是bootstarp的select样式,然后有看到有个大佬说重新渲染一下就可以正常显示了,但是楼主一个前端小白,不知道怎么重新渲染,于是又上网找啊找,终于有一个方法是起作用了!!!(泪目!!!困扰了2天!!!)
下面上代码:

//要以编程方式更新JavaScript的选择,首先操作选择,然后使用refresh方法更新UI以匹配新状态。 在删除或添加选项时,或通过JavaScript禁用/启用选择时,这是必需的。
 $('#yyyy').selectpicker('refresh');
 //render方法强制重新渲染引导程序 - 选择ui,如果当您编程时更改任何相关值而影响元素布局,这将非常有用。
 $('#yyyy').selectpicker('render');
 
 PS:yyyy 是 select标签的id

参考文章:
https://blog.csdn.net/ypp91zr/article/details/82790518

本文为原创文章,请注意保留出处!
idea调试vue项目 2023年10月27日

vue项目正常启动 配置jsdebug 配置的url就是前端的页面地址 参考:http://www. ... idea调试vue项目

修复群晖Synology Drive client右键菜单缺失问题 Local, clean & environmental 作者:Pastore Antonio
1807 浏览量
1780 浏览量
configure: error: Package requirements (oniguruma) were not met Local, clean & environmental 作者:Pastore Antonio
1525 浏览量
Adobe Acrobat Pro 激活 Local, clean & environmental 作者:Pastore Antonio
1520 浏览量
追寻日出,找回自己 Local, clean & environmental 作者:Pastore Antonio
1489 浏览量