2016-04-27 34 views

答えて

2

Davidの答えは私のために動作しませんでした。しかし、これらの二つの解決策が働いた:

解決方法1:

buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" />', 
onDropdownShown: function() { 
       $('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click(); 
      }, 
onDropdownHidden: function() { 
       $('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click(); 
      } 

をソリューション2:

buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" />' 

その後:

setTimeout(function(){ 
    $('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click(); 
} , 2000); 
1

私はここで、このための簡単な例を追加しました。

トリックは一度ページをロードした後、各グループのクリックイベントをトリガされます。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#example-enableCollapsibleOptGroups-collapsed').multiselect({ 
      enableCollapsibleOptGroups: true, 
      buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" />' 
     }); 
     $('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click(); 
    }); 
</script> 
<select id="example-enableCollapsibleOptGroups-collapsed" multiple="multiple"> 
    <optgroup label="Group 1"> 
     <option value="1-1" disabled>Option 1.1</option> 
     <option value="1-2" selected="selected">Option 1.2</option> 
     <option value="1-3" selected="selected">Option 1.3</option> 
    </optgroup> 
    <optgroup label="Group 2"> 
     <option value="2-1">Option 2.1</option> 
     <option value="2-2">Option 2.2</option> 
     <option value="2-3">Option 2.3</option> 
    </optgroup> 
</select> 
+0

は動作しませんでした。私はonDropdownShown/onDropdownHiddenでそれをしなければならなかった。もう1つの解決策は、2秒後に次のようにすることでした。 setTimeout(function(){ $( '#example-enableCollapsibleOptGroups-collapsed-container.caret-container')click(); }、2000); – Aboelseoud

+0

とにかく助けてくれてありがとう! – Aboelseoud

+0

ドキュメント(http://davidstutz.github.io/bootstrap-multiselect/#configuration-options-enableCollapsibleOptGroups)に記載されている例を確認しましたか?この例のキーは、ページを最初にロードする必要があるため、 '$(document).ready(function(){...});です。 –

0

私は別のを思い付いてきましたmに対してうまくいくソリューションe。

HTML:

<div id="multiselect-filter-dropdown-wrapper"> 
    <label id="multiselect-filter-dropdown-label">Filter:</label> 

    <select multiple id="multiselect-filter-dropdown"></select> 
</div> 

JS:

$('#multiselect-filter-dropdown').multiselect({ 
    enableCollapsibleOptGroups: true 
}); //init with required options 

$('#multiselect-filter-dropdown').multiselect('dataprovider', multiselectFilterDataProvider); //populate with required data 

$('#multiselect-filter-dropdown-wrapper ul.multiselect-container li:not(.multiselect-all):not(.multiselect-group)') 
.hide() 
.addClass('multiselect-collapsible-hidden'); //collapse required opt groups 
関連する問題