码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap 之下拉多选

时间:2018-02-10 17:05:14      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:绑定   bootstrap   json   效果   pen   multiple   nbsp   html   picker   

效果如图:

技术分享图片

 

一、HTML代码

 <label class="col-sm-1 control-label text-right" for="ds_host">
                科室:</label>
            <div class="col-sm-3">
                <select id="sl_ks" class="selectpicker" data-live-search="false" multiple="multiple">
                    <option value="0" selected="selected">全部</option>
                </select>
            </div>

二、js绑定值

        $.ajax({
                type: get,
                url: jgdx.ashx?action=bindBm,
                dataType: json,
                success: function (datas) {//返回list数据并循环获取  
                    var select = $("#sl_ks");
                    for (var i = 0; i < datas.length; i++) {
                        select.append("<option value=‘" + datas[i].id + "‘>"
                                 + datas[i].gzbm + "</option>");
                    }
                    $(#sl_ks.selectpicker).selectpicker(val, ‘‘);
                    $(#sl_ks.selectpicker).selectpicker(refresh);
                }
            });

三、后台构造的json格式

[{"gzbm":"办公室","id":"1"},
{"gzbm":"领导班子","id":"2"},
{"gzbm":"研发部","id":"3"},
{"gzbm":"后勤部","id":"4"},
{"gzbm":"质检部","id":"5"},
{"gzbm":"媒介部","id":"19"}]

 

bootstrap 之下拉多选

标签:绑定   bootstrap   json   效果   pen   multiple   nbsp   html   picker   

原文地址:https://www.cnblogs.com/zhangjd/p/8438979.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!