V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
ray0625
V2EX  ›  JavaScript

bootstrap 中 select 动态添加 option 的问题

  •  
  •   ray0625 · 2015-08-07 18:08:14 +08:00 · 14371 次点击
    这是一个创建于 3429 天前的主题,其中的信息可能已经有所发展或是发生改变。

    页面上的样式是用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没有渲染新添加的内容,所以在下拉列表中就没显示,,,想请教一下如何解决

    6 条回复    2015-08-07 21:42:24 +08:00
    Keita1314
        1
    Keita1314  
       2015-08-07 18:17:57 +08:00
    后台返回的数据正确吗
    dong3580
        2
    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
        3
    irockytan  
       2015-08-07 18:50:26 +08:00 via Android
    没记错的话bootstrap的select用的是一个叫做select2的jquery插件,你看看这个插件的API
    vmebeh
        4
    vmebeh  
       2015-08-07 19:23:00 +08:00
    F12 看一下有没有报错的地方,在 console 直接调试更直接;bootstrap 官网实测你的方法可用。

    js 修改了 DOM 浏览器就会重新渲染,不存在 bootstrap 不渲染的问题。
    Biwood
        5
    Biwood  
       2015-08-07 20:33:50 +08:00
    我也很好奇,怎么会不渲染,bootstrap 的 select 下拉样式本来就是原生的啊,多半是你的代码写的有问题
    jugelizi
        6
    jugelizi  
       2015-08-07 21:42:24 +08:00
    要么你用select2的异步加载方法,要么你ajax后执行$('select').select2()方法
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1250 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 18:02 · PVG 02:02 · LAX 10:02 · JFK 13:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.