BootStrap-select插件动态添加option无法显示

问题描述：　

　　　在使用bootstrap-select插件时出现下拉框无法显示动态追加的option，经过查看element元素发现，select标签已经append进去了所需的option选项，但是页面就是无法显示，经过源码分析发现，bootstrap在对select初始化渲染后，会在ul标签中追加li标签属性,而此时无法显示动态追加的option便是因为此li标签中没有值。因为在动态对select进行动态后没有进行重新进行渲染，导致ul标签下的li没有将append的option渲染进去，至此不能正常显示。

源码分析：

<div class="form-group"><label class="control-label">下拉框:</label><select class="selectpicker form-control" id="selector" name="selector"><option></option></select>
</div>$.ajax({url:'######',type:'POST',success:function (data) {$.each(data, function (index, item) {$("#selector").append("<option value='"+data[index].id+"'>"+data[index].name+"</option>");}); //使用refresh方法更新UI以匹配新状态。$('#selector').selectpicker('refresh');//render方法强制重新渲染引导程序 - 选择ui。$('#selector').selectpicker('render');}});

解决办法：

注意js中最后两行，缺一不可；

 //使用refresh方法更新UI以匹配新状态。$('#selector').selectpicker('refresh');//render方法强制重新渲染引导程序 - 选择ui。$('#selector').selectpicker('render');

refresh对select进行最新状态个更新后，在使用render方法对ul标签进行重新渲染，由此动态append的option值也会追加到ul标签中。

转载于:https://www.cnblogs.com/staticking/p/10504584.html

BootStrap-select插件动态添加option无法显示相关推荐

layui option 动态添加_layuiselect如何动态添加option
这次给大家带来layui select如何动态添加option,layui select动态添加option的注意事项有哪些,下面就是实战案例,一起来看一下. html 产品类别轻松融容易融快乐 ...
layui option 动态添加_layui select动态添加option的实例
html 产品类别轻松融容易融快乐融增加产品类别 js //重新渲染表单 function renderForm(){ layui.use('form', function(){ var fo ...
html表单中动态添加下拉框,antd Select下拉菜单动态添加option里的内容操作
antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值提供一个公共的方法,每次只需去调用这个方法就行了 //这里是示例数据格式 let giftScop ...
select2动态添加option
select2动态添加option 背景 html 原来的实现 javascirpt实现后端接口返回取值修改后 javascript实现后端接口返回结果取值结论背景 select2 使用 ...
bootstrap select 插件两级联动
2019独角兽企业重金招聘Python工程师标准>>> bootstrap select 插件两级联动插件地址:http://silviomoreto.github.io/boot ...
activemenu怎么拼 vue_vue-element-admin登录逻辑，以及动态添加路由，显示侧边栏
这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...
为chosen jQuery插件动态添加未找到的下拉框值
一.问题描述做项目的时候遇到的问题:chosen选项中没有可选值,想实现用户输入的值动态添加入option,存到后台保存二.插件准备下载网址:https://harvesthq.github.i ...
html动态添加图片不显示不出来,解决 viewer.js 动态更新图片导致无法预览的问题...
前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用Viewer插件的挺多,就选用的这款插件,但是Viewer插件会产生缩略图,这里取巧了,将缩略图统一替换成了一个带有查看两字的小图片,这 ...
android 在指定位置添加布局,Android 如何动态添加 View 并显示在指定位置。
引子最近,在做产品的需求的时候,遇到 PM 要求在某个按钮上添加一个新手引导动画,引导用户去点击.作为 RD,我哗啦啦的就写好相关逻辑了.自测完成后,提测,PM Review 效果. 看完后,PM ...

BootStrap-select插件动态添加option无法显示

BootStrap-select插件动态添加option无法显示相关推荐

最新文章

热门文章