Bootstrap multiselect选择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
});

当多重选择被实例化时,它会在浏览器中显示(有一些css格式说明其方面):

虽然我希望它显示为(在实例化时选中所有复选框,而不是点击'全选'):

我查看了文档,但没找到它......

Bootstrap多选文档

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>