bootstrap的多選下拉框的使用

bootstrap的多選下拉框的使用：

     最近，項目中使用到多選下拉框，由于下拉的資料量比較多，是以使用了bootstrap 的multiselect，此架構可以對下來的條目進行查詢搜尋，可以友善的從衆多的選項中刷選出對應的選項。

  首先需要下載下傳bootstrap-multiselect.js和bootstrap-multiselect.css，并将其引入到頁面中。使用方法如下：

$("#faultTypeList").multiselect({
                    maxHeight: 150,//選擇框的高度
                    buttonWidth:'50%',//選擇框的長度
                    enableFiltering: false,//是否允許搜尋，true允許,false不允許
                    nonSelectedText:"-- 請選擇 --",//當沒有選擇時的預設的文字
                    onChange:changeContent//下拉框值發生改變時的事件
                });
           

 這是簡單的用法，至于其他的選項可參見http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html的說明。

bootstrap的雙清單下拉框：

    當選擇的值過多時，選擇框中不能知道自己的選擇時，可以使用雙清單下拉選擇框（bootstrap-duallistbox），使用方式如下：

var indicatorInfo =  $('#indicatorInfo').bootstrapDualListbox({
            infoText:"共{0}條",
            infoTextEmpty:"選擇0條",
            moveOnSelect: false,
            selectorMinimalHeight:180,
            filterTextClear:'全部',
            infoTextFiltered:'<span class="label label-warning">Filtered</span> {0} from {1}',
            preserveSelectionOnMove: 'moved'
        });
        indicatorInfo.bootstrapDualListbox('refresh', true);//重新加載重新整理,
           

效果圖如下：

參照文檔：http://www.virtuosoft.eu/code/bootstrap-duallistbox/