Bootstrap multiselect select all options at instanciation

Question

Я использую плагин bootstrap multiselect, чтобы добавить динамический код в выбранный. Вот мой код:

Html:

<label> 
    <span>Underlyings</span> 
    <select class="multiselect" multiple></select> 
</label> 

Javascript

var name = ['joe', 'mary', 'rose']; 

R.map(function (x) { 
    return $('.multiselect', d.el).append("<option>" + x + "</option>"); 
}, name); 

$('.multiselect', d.el).multiselect({ 
    allSelectedText: 'All', 
    maxHeight: 200, 
    includeSelectAllOption: true 
}); 

Когда множественный выбор является instancied, он появляется в качестве таковых в браузере (есть некоторое CSS форматирование с разъяснением его аспекта):

В то время как я хотел бы, чтобы выглядеть как (со всеми флажками в создании экземпляра, не нажать на «выбрать все»):

Я заглянул в документ, но не нашел его ...

Bootstrap multiple select documentation

Answer 1

Вы должны работать как selectAll (с false в качестве второго параметра - это означает, что все значения будут выбраны, даже без видимых значений) и updateButtonText (для изменения текста, отображаемого в раскрывающемся меню).

Проверить этот пример:

$(function() { 
 
    var name = ['joe', 'mary', 'rose']; 
 
    $.map(name, function (x) { 
 
    return $('.multiselect').append("<option>" + x + "</option>"); 
 
    }); 
 
    
 
    $('.multiselect') 
 
    .multiselect({ 
 
     allSelectedText: 'All', 
 
     maxHeight: 200, 
 
     includeSelectAllOption: true 
 
    }) 
 
    .multiselect('selectAll', false) 
 
    .multiselect('updateButtonText'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" /> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" /> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script> 
 

 
<label> 
 
    <span>Underlyings</span> 
 
    <select class="multiselect" multiple="multiple"></select> 
 
</label>

Answer 2

, если вы хотите, чтобы обновить загрузчик мульти выбрать то там три строки кода, которые вы можете попробовать: $("#YourButtonId").click(function() {
$("#YourMultiSelectId").multiselect("deselectAll", false); $("#YourMultiSelectId").multiselect('updateButtonText'); });