Bootstrap multiselect选择instanciation中的所有选项

Question

我正在使用bootstrap multiselect插件将动态代码添加到select中。这是我的代码：

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 multiple select documentation

Answer 1

您需要同时运行selectAll（false作为第二个参数 - 这表示将选择所有值，甚至是不可见的值）和updateButtonText（更改文本出现在下拉菜单中。）

检查此示例：

＆＃13;

＆＃13;

$(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');
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果要刷新多重引导，请尝试：

$('[data-plugin-multiselect]').multiselect('destroy').multiselect();

Answer 3

如果你想刷新bootstrap multi select那么你可以尝试三行代码： $("#YourButtonId").click(function () {
$("#YourMultiSelectId").multiselect("deselectAll", false); $("#YourMultiSelectId").multiselect('updateButtonText'); });

Answer 4

因为我有来自api或JSON数据的动态列，所以这里是可行的。

            var results = response;
            if (results.length > 0) {
                var columnsIn = results[0];

                for (var key in columnsIn) {
                    var col = new Object();

                    col.data = key;
                    col.title = key;
                    col.value = key;
                    col.label = key;
                    var htm = '';
                    htm += '<option selected>' + col.value + '</option>';

                    $('#dropdownname').append(htm);
                }

                $('#dropdownname').multiselect("rebuild");