Bootstrap select多选下拉框赋值

selectpicker下拉多选框ajax异步或者提前赋值=》默认值(2)

Bootstrap Multi-Select Plugin的动态数据插入使用

图片:

这个你看到的是我页面的效果,我将里面的js代码修改了一点,扩展了一下显示的结果id,text,这是固定的,后面的是我又加了一个参数

参考页面:多选框插件链接(这个就是那个多选的插件了,这贴的图是我修改的,我只是个菜鸟,我能修改,你也能修改)

至于那个绑定参数,有代码自己看,一定要用

appendTo()这个方法将option动态的插入到select中,这样插件的样式不会改,功能也不会丢失

这是js部分

var loadtext = function () {
    $.ajax({
        type: 'GET',
        url: root + '/load/datatext',
        success: function (data) {
            var data = eval(data);
            $.each(data, function (i) {
             $("<option value='"+data[i].id+"'>"+data[i].text+"</option>")
            .appendTo("#BtnCodeStr .selectpicker");//这里它才知道是给谁#BtnCodeStr 的.selectpicker
            });
            $('.selectpicker').selectpicker({
                style: 'btn-info',
                size: 8
            });
        }
    });
}

这是前台部分

<div class="col-md-7">
    <select id="BtnCodeStr" name="BtnCodeStrName" class="selectpicker show-tick form-control"
            data-style="btn-success" multiple data-live-search="true">
    </select>
</div>
控制台调试代码(绑定的对象就在这里面哦)

-<div class="col-md-7">
     +<select id="BtnCodeStr" class="selectpicker show-tick form-control"
                 data-live-search="true" multiple="" data-style="btn-success" 
 name="BtnCodeStrName" style="display: none;">
      -<div class="dropdown-menu open" style="max-height: 284px; overflow: hidden;">
                +<div class="bootstrap-select-searchbox">
                +<ul class="dropdown-menu inner selectpicker" (这里的ui class标签selectpicker就是用来绑定数据的 role="menu" style="max-height: 240px; overflow-y: auto;"> 
                </div>
      </div>
</div>



  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值