I am using bootstrap multiselect
plugin to add dynamically code into an select. Here is my code:
Html:
JavaScript
x
5
1
<label>
2
<span>Underlyings</span>
3
<select class="multiselect" multiple></select>
4
</label>
5
Javascript
JavaScript
1
12
12
1
var name = ['joe', 'mary', 'rose'];
2
3
R.map(function (x) {
4
return $('.multiselect', d.el).append("<option>" + x + "</option>");
5
}, name);
6
7
$('.multiselect', d.el).multiselect({
8
allSelectedText: 'All',
9
maxHeight: 200,
10
includeSelectAllOption: true
11
});
12
When the multiple select is instancied, it appears as such in the browser (there is some css formatting explaining its aspect):
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 …
Bootstrap multiple select documentation
Advertisement
Answer
You need to run both selectAll
(with false
as 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).
Check this example:
JavaScript
1
15
15
1
$(function() {
2
var name = ['joe', 'mary', 'rose'];
3
$.map(name, function (x) {
4
return $('.multiselect').append("<option>" + x + "</option>");
5
});
6
7
$('.multiselect')
8
.multiselect({
9
allSelectedText: 'All',
10
maxHeight: 200,
11
includeSelectAllOption: true
12
})
13
.multiselect('selectAll', false)
14
.multiselect('updateButtonText');
15
});
JavaScript
1
11
11
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" />
3
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
4
5
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
6
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
7
8
<label>
9
<span>Underlyings</span>
10
<select class="multiselect" multiple="multiple"></select>
11
</label>