效果如圖：

?

一、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"}]

?

轉載于:https://www.cnblogs.com/zhangjd/p/8438979.html

總結

以上是生活随笔為你收集整理的bootstrap 之下拉多选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。