Bootstrap-duallistbox的使用

1：首先引入相關js 

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Content/jquery/jquery-2.1.4.min.js"></script>
    <script src="~/Content/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <link href="~/Content/duallistbox/bootstrap-duallistbox.min.css" rel="stylesheet" />
    <script src="~/Content/duallistbox/jquery.bootstrap-duallistbox.min.js"></script>

 2：添加html代碼

 <select multiple="multiple" id="selectSupplier" name="selectSupplier" class="selectSupplier"></select>

　

3：調用方法下圖1，2，3代碼說明

     1）：獲取select

     2）：循環賦值

     3）：初始化duallistbox

 判斷已選/未選

  if (selectSupplierRowId.indexOf("," + mol.SUPPLIER_ID + ",") >= 0) {
                         o.selected = "selected";
                     }

 

duallistbox常用屬性

     $('.selectSupplier').bootstrapDualListbox({
                     nonSelectedListLabel: '未授權',
                     selectedListLabel: '已授權',
                     filterTextClear: '展示所有',
                     filterPlaceHolder: '過濾搜索',
                     moveSelectedLabel: "添加",
                     moveAllLabel: '添加所有',
                     removeSelectedLabel: "移除",
                     removeAllLabel: '移除所有',
                     infoText: '共{0}個',
                     infoTextFiltered: '搜索到{0}個 ,共{1}個',
                     infoTextEmpty: '列表為空',
                     selectorMinimalHeight: 360,
                     moveOnSelect: false,

                });

 

 

4：  效果圖如下：(數據已打馬賽克 但意思你們懂~~)

 

 

下載地址：https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox