bootstrap 中 select 动态添加 option 的问题

2015-08-07 18:08:14 +08:00
 ray0625

页面上的样式是用bootstrap渲染的

页面上有一个select
<select id="assignModel-role" class="form-control" style="width: 200px;">
<option value="">请选择...</option>
</select>

里面的option是后台获取后通过jq动态添加的,类似这样:
$("#assignModel-role").append("<option value='" + data.id + "'>" + data.name + "</option>");

这样添加后bootstrap没有渲染新添加的内容,所以在下拉列表中就没显示,,,想请教一下如何解决

14372 次点击
所在节点    JavaScript
6 条回复
Keita1314
2015-08-07 18:17:57 +08:00
后台返回的数据正确吗
dong3580
2015-08-07 18:25:02 +08:00
用bootstrap中的li标签代替select下拉框实现,另外试试看是不是后台返回数据没返回回来:
class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"
如果是ajax请求的,那么出题可能出在 请求方式的同步和异步上,这样的话应该设置同步.
PS:这样的数据绑定,建议用angular处理,拼接代码维护起来是一件很糟糕的事情.
irockytan
2015-08-07 18:50:26 +08:00
没记错的话bootstrap的select用的是一个叫做select2的jquery插件,你看看这个插件的API
vmebeh
2015-08-07 19:23:00 +08:00
F12 看一下有没有报错的地方,在 console 直接调试更直接;bootstrap 官网实测你的方法可用。

js 修改了 DOM 浏览器就会重新渲染,不存在 bootstrap 不渲染的问题。
Biwood
2015-08-07 20:33:50 +08:00
我也很好奇,怎么会不渲染,bootstrap 的 select 下拉样式本来就是原生的啊,多半是你的代码写的有问题
jugelizi
2015-08-07 21:42:24 +08:00
要么你用select2的异步加载方法,要么你ajax后执行$('select').select2()方法

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/211579

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX