Javascript Bootstrap 多选在实例化时选择所有选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39962732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap multiselect select all options at instanciation
提问by Colonel Beauvel
I am using bootstrap multiselectplugin to add dynamically code into an select. Here is my code:
我正在使用bootstrap multiselect插件将动态代码添加到选择中。这是我的代码：
Html:
网址：
<label>
<span>Underlyings</span>
<select class="multiselect" multiple></select>
</label>
Javascript
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
});
When the multiple select is instancied, it appears as such in the browser (there is some css formatting explaining its aspect):
当多重选择被实例化时，它在浏览器中显示为这样（有一些 css 格式解释了它的方面）：
Whereas I would like it to appear as (with all checkbox selected at instanciation, without to click on 'select all'):
而我希望它显示为（在实例化时选中所有复选框，而无需单击“全选”）：
I looked into the doc, but did not find it ...
我查看了文档，但没有找到它......
回答by Dekel
You need to run both selectAll(with falseas second parameter - this indicate that all values will be selected, even non-visible values) and updateButtonText(to change the text that appear in the drop-down menu).
您需要同时运行selectAll（false作为第二个参数 - 这表示将选择所有值，甚至是不可见的值）和updateButtonText（以更改出现在下拉菜单中的文本）。
Check this example:
检查这个例子：
$(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>回答by Ashish Garg
if you want to refresh the bootstrap multi select then there it is three line of code that which you can try:
$("#YourButtonId").click(function () {
$("#YourMultiSelectId").multiselect("deselectAll", false);
$("#YourMultiSelectId").multiselect('updateButtonText');
});
如果您想刷新引导程序多选，那么您可以尝试三行代码：
$("#YourButtonId").click(function () {
$("#YourMultiSelectId").multiselect("deselectAll", false);
$("#YourMultiSelectId").multiselect('updateButtonText');
});
回答by Doyle Del Carmen
since i have dynamic columns which came from the api or JSON data here is the one working.
因为我有来自 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");
