bootstrap-multiselect 的簡單使用，樣式修改，動態創建option

1.bootstrap-multiselect 顧名思義基於bootstrap，bootstrap基於jquery,所以第一步，引入文件

bootstrap.css/ juery.js /bootstrap.js  引入此三個文件，是常用的就不貼出來了；

 引入下面的兩個文件，如果沒有請去github下載：https://github.com/davidstutz/bootstrap-multiselect

 <link rel="stylesheet" type="text/css" href="bootstrap-multiselect.css">
<script type="text/javascript" src="bootstrap-multiselect.js"></script>

 2.開始使用

 <div style="width: 100%; margin:20px">
        <select multiple="multiple" style="width:100%; ">
            <option>一室一廳</option>
            <option>兩室一廳</option>
            <option>三室一廳</option>
        </select>
    </div>

 這是一段都知道的代碼，我儘量說的簡便易懂；

$('select').multiselect();

 

 不展開和展開的效果就在上面；這就是簡單的使用；

接下來我們來添加兩個配置：

 $("select").multiselect({
        buttonWidth:195,  //選擇框的大小
        includeSelectAllOption: true,//是否現實全選
     });

 看看效果：

可以看到源碼裏面介紹，有許多的配置項，網上已經相應的關於每一個配置項的介紹，例如這一篇http://blog.csdn.net/fangzilixia/article/details/51265112  可以看看；

2.改變多選框的樣式；讓它變得好看點；

 .multiselect-container{ /*下拉框的樣式*/
            width:195px;
        }
        .multiselect-container>li>a>label{
            line-height: 28px;
            font-size: 12px;
        }
        .multiselect-container>li>a>label>input[type='checkbox'] {
             margin-top: 7px;
        }
        .multiselect-item.multiselect-all.active{
            border-bottom:1px solid #ccc !important;
        }
        /* .multiselect-container.dropdown-menu li{
            width:49%;
            display: inline-block;
        }
        .multiselect-container.dropdown-menu li:first-child{
            width:100%;
        } */
        .multiselect.dropdown-toggle.btn.btn-default:link,.multiselect.dropdown-toggle.btn.btn-default:visited,.multiselect.dropdown-toggle.btn.btn-default:focus,.multiselect.dropdown-toggle.btn.btn-default:hover,.multiselect.dropdown-toggle.btn.btn-default:active, .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default{
          background: #fff;
          outline: none;
          border:1px solid #ccc;
          box-shadow: none;
        }
        .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{
            background: #474752;
        }
        .multiselect-selected-text{
            font-size:13px;
            font-family: '微軟雅黑','宋體';
            width:100%;
            float: left;
            text-align: left;
        }
        .btn.btn-default{
            padding-right:15px;
        }

 看看效果：

樣式就改到這；

3.動態添加option

 將html的option去掉：

<div style="width: 100%; margin:20px">
        <select multiple="multiple" name="companyIdStr"  class="companyIdStr" style="width:100%; ">
        </select>
    </div>

 法1：

  function multiselect(obj) {  //初始化方法
        $(obj).multiselect({
            includeSelectAllOption: true,
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            buttonWidth: 195,
            maxHeight: 300,
        });
    }
    //動態創建option
    function newOption(data, className) {
        var option;
        for (var i = 0; i < data.length; i++) {
            if (data[i].selected) {  //判斷是否要初始化時就選擇
                option += '<option value="' + data[i].value + '"  selected="' + data[i].selected + '">' + data[i].label + '</option>';
            } else {
                option += '<option value="' + data[i].value + '">' + data[i].label + '</option>';
            }
        }
        $(className).html(option);//將內容顯示在複選框， $(className).append(option) 也是可以的;
        multiselect(className);
    }
    var data = [{ value: '1', label: '一室一廳', selected: true }, { value: '2', label: '兩室一套' }, { value: '3', label: '兩室三套' }];
    newOption(data, '.companyIdStr');

 

效果這樣，默認第一個可選；

法二：

 $("select[name='companyIdStr']").multiselect({
       enableClickableOptGroups: true,
       enableCollapsibleOptGroups: true,
       enableCollapsibleOptGroups: true,
       buttonWidth:195,  //選擇框的大小
       includeSelectAllOption: true,
       selectAllJustVisible:true,
        //下拉回調函數  
        onDropdownShow: function (event) {  
            addOption();
        },   
     });
    function addOption(){
           var data=[{value:'1',label:'一室一廳',selected:true},{value:'2',label:'兩室一套'}];
           $("select[name='companyIdStr']").multiselect('dataprovider',data);
    }

 利用本身回調事件；

 就是這樣，兩種辦法；