bootstrap-muliselect屬性
阿新 • • 發佈：2018-12-09
- $('.select2_sample1').multiselect({
- buttonClass: 'btn btn-link',//顯示按鈕style
- buttonWidth: '400px',//按鈕寬度
- inheritClass: true,//繼承原來select的button的class
- buttonContainer: '<div class="btn-group" />',//承載按鈕和下拉框
- selectedClass: 'multiselect-selected',//選中項樣式
- optionClass: function(element) {
- var value = $(element).val();
- if (value%2 == 0) {
- return 'even';
- }
- else {
- return 'odd';
- }
- },
- optionLabel: function(element) {
- return $(element).html() + '(' + $(element).val() + ')';
- },
- buttonWidth: '150px',//選中內容長度超過150顯示4selected
- enableClickableOptGroups: true,//同時取組或者all
- enableCollapsibleOptGroups: true,//組可摺疊
- enableFiltering: true,//過濾
- filterPlaceholder: 'Search for something...',
- filterBehavior: 'value',//根據value或者text過濾
- enableFullValueFiltering: true,//能否全字匹配
- enableCaseInsensitiveFiltering: true,//不區分大小寫
- includeSelectAllOption: true,//全選
- selectAllText: 'Check all!',//全選的checkbox名稱
- selectAllNumber: false,//true顯示allselect（6）,false顯示allselect
- selectAllName: 'select-all-name',
- selectAllValue: 'select-all-value',//可以為strig或者數字
- selectAllJustVisible: false,//選擇所有的。true為全選可見的
- onSelectAll: function() {
- alert('onSelectAll triggered.');
- },
- disableIfEmpty: true,//沒有選項時readonly
- disabledText: 'Disabled ...',//disabled時顯示的文字說明
- //下拉選項擺放在右側
- buttonWidth: '400px',
- dropRight: true,
- //下拉選項擺放在頂部
- maxHeight: 400,
- dropUp: true,
- //擺放在左側預設為200
- maxHeight: 200,
- //見伺服器端名稱
- checkboxName: 'multiselect[]',
- //初始化
- onInitialized: function(select, container) {
- alert('Initialized.');
- },
- onChange: function (option, checked) {//change事件改變
- console.log(option.length + ' options ' + (checked ? 'selected' : 'deselected'));
- },
- //下拉回調函式
- onDropdownShow: function (event) {
- alert('Dropdown shown.');
- },
- //下拉框關閉回撥函式
- onDropdownHide: function (event) {
- alert('Dropdown closed.');
- },
- //點選select呼叫，然後顯示出下拉框
- onDropdownHidden: function (event) {
- alert('Dropdown closed.');
- },
- });