bootstrap-select我踩到的坑之动态加载后要“refresh”

最新推荐文章于 2022-10-17 16:02:53 发布
最新推荐文章于 2022-10-17 16:02:53 发布
阅读量8.3k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： bootstrap-select
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39735923/article/details/83001634
本文记录了在使用bootstrap-select插件时遇到的样式渲染问题及解决方案。作者在动态加载select下拉控件时，发现控件没有样式。通过在代码中加入refresh语句，成功刷新并显示了select控件的样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

bootstrap-select插件非常好用！但是！！前期不会用，出现了样式渲染不出来的问题！！在这里记录一下~~~~

在我的项目里面，select下拉控件需要动态加载出来，由于是用字符串拼接的，结果拼出来之后发现没有任何的样式。。。

这是我的部分代码：

一开始以为是js加载顺序的问题，后来发现没用，，最后发现应该加一句refresh的语句刷新select控件！！

代码如下：

$('#labelTypeSelect2' + (labelTableBodyTrNum + 1)).selectpicker('refresh');

解决了就好，，，再此记录一下。。。

bootstrap selectpicker 动态加载数据
princeLLM的博客
03-21 2万+
实现： spring mvc负责后台，ajax负责前台。所有代码均为本人工程中真正应用的代码，肯定可行，网上找到各种大bug的代码真是moutain people moutain sea啊！！！！ 下拉框写法（是否带搜索功能之类的看业务要求和您个人喜好了）： 选择学校--： id="schoolno" name="schoolno" class="selectpicker" >
selectpicker 动态加载数据
热门推荐
wahwhh的博客
01-09 1万+
在做二级下拉菜单动的时候，一般需要动态的给第二个下拉菜单赋值（有时候第一个下拉菜单也是动态加载数据），一般的下拉框的样式比较丑，当使用selectpicker进行下拉菜单美化时，有可能导致下拉菜单加载不进来，这里对这个问题做一个完美解决。 1.一般的下拉框二级联动实现<select id="parent"></select> <select id="childern1"></select>
bootstrap-select怎么刷新数据
一个程序员的一些碎碎念
07-23 1万+
在使用bootstrap-select时，需要刷新数据。只需要调用bootstrap-select内置的方法就可以了。 this.dataservice.getData(this.url[0]).then(res => { let tempData = res.rows; let options = "请选择"; tempData.forEach(el =>
bootstrap中selectpicker控件下拉框 刷新问题
AnselAndEvil的博客
08-14 4416
博主是个小后台，在工作中写前台时发现后台提交过来的数据没问题，前台接收也没问题。楼主用的是play2，感觉这方面国内资源比较少没以后也会多写一点play2相关的博客。言归正传，上我们之前遇到问题的代码。 $.get('@url',function (json) { for(var i=0 ;i &lt; json.length;i++) { $("#@field.id...
bootstrap-select 下拉多选 重置刷新下拉选项
test
04-26 3675
js中其他事件相关的代码中，使用jquery通过控件id设置selectpicker属性值为refresh进行重置刷新 function doReset() { //对id为elementID的下拉框进行重置刷新 $("#elementID").selectpicker('refresh'); } 或者： 参考https://bl...
bootstrap-select 使用笔记 设置选中值及手动刷新
anxingshe3043的博客
12-30 502
直接笔记：　 　　1、页面刚加载完填充select选项数据时，需要手动刷新一下组件，否则没有选项值。（组件初始化时，li 与 option 分离的，需要刷新一下（据说）） 　　 $.post('/cpms/todo/getProjectList', data).done(function(result) { if(typeof(result) == "string"...
解决bootstrap-select 动态加载数据不显示的问题
10-18
例如，如果使用jQuery动态添加了新的option元素到select中，然后不调用refresh或render，那么这些新添加的option将不会被bootstrap-select识别为有效选项，用户界面也就不会显示这些新增的选项。 ```javascript // ...
基于Bootstrap下拉框插件bootstrap-select使用方法详解
10-18
如果需要动态加载数据，可以在JavaScript中操作DOM，动态添加到<select>标签中。或者，如果使用Ajax从服务器请求数据，可以利用bootstrap-select的API来动态更新选项。例如： ```javascript $('#sel_role').select...
bootstrap-select-1.13.0-dev.zip
08-15
5. **方法调用**：Bootstrap Select还提供了许多实用的方法，如`selectAll()`全选所有选项，`deselectAll()`取消所有选项，`refresh()`刷新下拉框，以同步DOM的变化等。这些方法可以让我们在运行时动态控制下拉框的...
bootstrap-select-1.13.0-dev.rar
08-01
7. **API方法**：Bootstrap Select还提供了API接口，如`selectpicker('refresh')`用于刷新下拉框状态，`selectpicker('toggle')`用于切换下拉框的展开和关闭状态等，方便在程序中动态操作下拉框。 8. **国际化支持*...
selectpicker下拉框的动态加载
g_blue_wind的博客
03-17 1785
1、引入文件 &lt;link href="${base}/resources/common/css/bootstrap.css" rel="stylesheet"&gt; &lt;link href="${base}/resources/common/css/bootstrap-select.css" rel="stylesheet"&gt; &lt;scrip...
动态创建selectpicker时遇到的问题
weixin_42525456的博客
10-17 606
动态创建selectpicker遇到的问题
Bootstrap select多选以及数据回显
Day_Breaking的博客
05-09 2370
最近一直在用 bootstrap selectpicker 的一些东西，先看效果如下： GitHub链接，http://silviomoreto.github.io/bootstrap-select/ 直接clone下来，获取包 链接：https://pan.baidu.com/s/1Iset8doXqv_ZSH_jzeckFg 提取码：etyl 解压，获取所用到的js,css ...
js刷新select
xxfeng1224的专栏
03-07 3255
****************************************************************脚本****************************************************************function aaa(){document.form1.select.selectedIndex=0;}**************
bootstrap - select 动态添加数据
u013584303的博客
09-20 2063
设置select的选中值$('.selectpicker').selectpicker('val','值'); 刷新select   $('.selectpicker').selectpicker('refresh');*动态添加数据需刷新一下 不行试试$('.selectpicker').selectpicker('render')...
select2动态渲染下拉框以及下拉数据格式化
S‘blog
10-17 7772
//动态渲染下拉框 $('select[name=&quot;userid&quot;]').html(getOption($userName, 'personname')).val('{$ITEM-&amp;gt;relationuserid}').select2({ width: '100%', theme: &quot;bootstrap&quot;, placeholder: &quot;请选择人员...&quot;,
jquery bootstrap-select多选组件使用指南
chuangxin的专栏
03-13 7261
jquery bootstrap-select多选组件使用指南，包括bootstrap-select如何上手，核心配置项说明，常用api方法演示，案例展示。
bootstrap-select动态加载数据
null
04-25 1960
bootstrap-select插件源码： https://github.com/snapappointments/bootstrap-select 动态加载数据： $("#station_selector").selectpicker(); 重新加载数据： $("#station_selector").selectpicker('refresh'); 谷歌大法好 ...
bootstrap动态调用select下拉框
kobe1qiqi的博客
11-15 1万+
html代码： 填报部门： addid" id="addid"> JS代码：/*获取下拉菜单*/ function showSel(){ $.ajax({           "type" : 'get',           "url": 地址,         "dataType" : "json",           "
Bootstrap-select组件：增强型下拉框功能解析
通过`.selectpicker('refresh')`方法，可以在选项动态变化后刷新下拉框的显示。 Bootstrap-select还支持通过JavaScript事件来增强下拉框的交互能力。例如，可以监听`change.bs.select`事件，以便在选项变更时执行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值