Bootstrap Snippet Multiselect with icons (Manish) using HTML CSS Bootstrap jQuery

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

"Multiselect with icons (Manish)"
Bootstrap 3.0.0 Snippet by Manish Yadav

Related: See More

Questions / Comments:

"Multiselect with icons (Manish)" Bootstrap 3.0.0 Snippet by Manish Yadav

Related: See More

Questions / Comments:

"Multiselect with icons (Manish)"
Bootstrap 3.0.0 Snippet by Manish Yadav