"Multiselect with icons"
Bootstrap 3.0.0 Snippet by victor-valencia

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<div class="container">
<h2>Multiselect with icons</h2>
<div class="row">
<div class="col-md-12">
<select type="text" class="form-control multiselect multiselect-icon" role="multiselect">
<option value="0" data-icon="glyphicon-picture" selected="selected">Photos</option>
<option value="1" data-icon="glyphicon-link">Link</option>
<option value="2" data-icon="glyphicon-pencil">Edit</option>
<option value="3" data-icon="glyphicon-shopping-cart">Cart</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<select type="text" class="form-control multiselect multiselect-icon" multiple="multiple" role="multiselect">
<option value="0" data-icon="glyphicon-picture text-primary" selected="selected">Photos</option>
<option value="1" data-icon="glyphicon-link">Link</option>
<option value="2" data-icon="glyphicon-pencil text-danger" selected="selected">Edit</option>
<option value="3" data-icon="glyphicon-shopping-cart">Cart</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<select type="text" class="form-control multiselect multiselect-icon" multiple="multiple" role="multiselect">
<option value="0" data-icon="glyphicon-picture" selected="selected">Photos</option>
<option value="1" data-icon="glyphicon-link" selected="selected">Link</option>
<option value="2" data-icon="glyphicon-pencil" selected="selected">Edit</option>
<option value="3" data-icon="glyphicon-shopping-cart" selected="selected">Cart</option>
</select>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .input-group{margin:5px}.multiselect-container>li{padding:0}.multiselect-container>li>a.multiselect-all label{font-weight:bold}.multiselect-container>li>label.multiselect-group{margin:0;padding:3px 20px 3px 10px;height:100%;font-weight:bold;}.multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:normal}.multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{margin:0}.multiselect-container>li>a>label>input[type="checkbox"]{margin-bottom:5px}.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}
.row {margin-bottom: 20px;}
.btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
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
/**
* bootstrap-multiselect.js
* https://github.com/davidstutz/bootstrap-multiselect
*
* Copyright 2012, 2013 David Stutz
*
* Dual licensed under the BSD-3-Clause and the Apache License, Version 2.0.
*/
!function($) {
"use strict";// jshint ;_;
if (typeof ko != 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect) {
ko.bindingHandlers.multiselect = {
init : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {},
update : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var ms = $(element).data('multiselect');
if (!ms) {
$(element).multiselect(ko.utils.unwrapObservable(valueAccessor()));
}
else if (allBindingsAccessor().options && allBindingsAccessor().options().length !== ms.originalOptions.length) {
ms.updateOriginalOptions();
$(element).multiselect('rebuild');
}
}
};
}
function Multiselect(select, options) {
this.options = this.mergeOptions(options);
this.$select = $(select);
// Initialization.
// We have to clone to create a new reference.
this.originalOptions = this.$select.clone()[0].options;
this.query = '';
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

please you can help me....
how create select glyphicon bfh-flag- by currency with condition database mysql.
example : in database currency= USD so in option show glyphicon bfh-flag-

thank's

andy () - 8 years ago - Reply 0


Does not work when i call the div containing this multiselect, using AJAX. I haven't made any changes in the script. It works when implemented in a normal JSP Page but it shows the normal HTML version's multiselect without checkboxes when called through AJAX. Any ideas on what i might be doing wrong?

Rahul Pal () - 8 years ago - Reply 0


if for fontawesome or themify icons ?

Eko Prasetyo () - 8 years ago - Reply 0


For Scroll effect add this to CSS file : .scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
And Update JS Code Line : ul: '<ul class="multiselect-container dropdown-menu scrollable-menu"></ul>',

Zahid Ullah () - 9 years ago - Reply 0


Cool snippet, thx! But I have some questions: is it possible to hide the checkboxes, so that you just see the icons and the options? and how do i make the select-dropdown scrollable?

Dong3000 () - 10 years ago - Reply 0


How would a multi level menu look?

DRAGON () - 11 years ago - Reply 0