"Test Multiselect"
Bootstrap 3.3.0 Snippet by garettg

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<form id="form">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<select name="depts" id="example-getting-started" multiple="multiple">
<option value="05">Area, Ethnic, Cultural, Gender, And Group Studies</option>
<option value="13">Education</option>
<option value="03">Natural Resources And Conservation</option>
<option value="40">Physical Sciences</option>
<option value="14">Engineering</option>
<option value="28">Military Science, Leadership And Operational Art</option>
<option value="09">Communication, Journalism, And Related Programs</option>
<option value="52">Business, Management, Marketing, And Related Support Services</option>
<option value="50">Visual And Performing Arts</option>
<option value="42">Psychology</option>
<option value="11">Computer And Information Sciences And Support Services</option>
<option value="45">Social Sciences</option>
<option value="38">Philosophy And Religious Studies</option>
<option value="30">Multi/Interdisciplinary Studies</option>
<option value="44">Public Administration And Social Service Professions</option>
<option value="51">Health Professions And Related Programs</option>
<option value="27">Mathematics And Statistics</option>
<option value="43">Homeland Security, Law Enforcement, Firefighting And Related Protective Services</option>
<option value="04">Architecture And Related Services</option>
<option value="16">Foreign Languages, Literatures, And Linguistics</option>
<option value="22">Legal Professions And Studies</option>
<option value="23">English Language And Literature/Letters</option>
<option value="24">Liberal Arts And Sciences, General Studies And Humanities</option>
<option value="54">History</option>
<option value="26">Biological And Biomedical Sciences</option>
<option value="00">Undefined</option>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url("//cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css");
body {
padding: 10px;
}
.row{
margin-top: 15px;
margin-bottom: 15px
}
.btn-group,
.multiselect {
width: 100%;
}
.multiselect {
text-align: left;
padding-right: 32px;
overflow: hidden;
text-overflow: ellipsis;
}
.multiselect .caret {
right: 12px;
top: 45%;
position: absolute;
}
.multiselect-container.dropdown-menu {
min-width: 0px;
}
.multiselect-container>li>a>label {
white-space: normal;
padding: 5px 15px 5px 35px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function() {
$('#example-getting-started').multiselect({
numberDisplayed: 1,
includeSelectAllOption: true,
allSelectedText: 'All Topics selected',
nonSelectedText: 'No Topics selected',
selectAllValue: 'all',
selectAllText: 'Select all',
unselectAllText: 'Unselect all',
onSelectAll: function(checked) {
var all = $('#example-getting-started ~ .btn-group .dropdown-menu .multiselect-all .checkbox');
all
// get all child nodes including text and comment
.contents()
// iterate and filter out elements
.filter(function() {
// check node is text and non-empty
return this.nodeType === 3 && this.textContent.trim().length;
// replace it with new text
}).replaceWith(checked ? this.unselectAllText : this.selectAllText);
},
onChange: function() {
debugger;
var select = $(this.$select[0]);
var dropdown = $(this.$ul[0]);
var options = select.find('option').length;
var selected = select.find('option:selected').length;
var all = dropdown.find('.multiselect-all .checkbox');
all
// get all child nodes including text and comment
.contents()
// iterate and filter out elements
.filter(function() {
// check node is text and non-empty
return this.nodeType === 3 && this.textContent.trim().length;
// replace it with new text
}).replaceWith(options === selected ? this.options.unselectAllText : this.options.selectAllText);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Navbar With Icons
Multiselect with icons

Questions / Comments: