Bootstrap 3 Multiselect Plugin

by Daniel Flores

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="panel panel-default">
    <div class="panel-heading">Panel heading without title</div>
    <div class="panel-body">
        <select id="mySelect" multiple name="options" data-toggle="multiselectlist" data-list-title="Test" data-selected-title="Something" data-btn-text="Add Stuff">
            <option title="1" value="1">AIXII Online - Show 1 - May 10</option>
            <option title="2" value="2">AIXII Online - Show 2 - Jun 10</option>
            <option title="3" value="3">AIXII Online - Show 3 - Jul 10</option>
            <option value="4">AIXII Online - Show 4 - Aug 10</option>
            <option value="5">AIXII Online - Show 5 - Sept 10</option>
            <option value="6">AIXII Online - Show 6 - Oct 10</option>
            <option value="7">AIXII Online - Show 7 - Nov 10</option>
            <option value="8">AIXII Online - Show 8 - Dec 10</option>
        </select>
    </div>
</div>

CSS

body {
    padding: 10px
}

JavaScript

+function ($) {
    'use strict';

    // MULTISELECT PUBLIC CLASS DEFINITION
    // ===============================
    var MultiselectList = function (element, options) {
        this.$container = null;
        this.$element   = null;
        this.options    =

        this.init(element, options);
    };

    MultiselectList.DEFAULTS = {
        listTitle: 'Available',
        selectedTitle: 'Selected',
        btnText: 'Add',
        boxHeight: 184
    };

    MultiselectList.prototype.init = function (element, options) {
        this.$container = null;
        this.$element = $(element);
        this.$contAvailable = null;
        this.$contSelected = null;
        this.$selAvailable = null;
        this.$listSelected = null

        this.$element.prop('multiple','multiple');

        this.options = this.getOptions(options);

        this.render();
    };

    MultiselectList.prototype.render = function() {
        var oThis = this;

        // Render the Container and hide the original input
        this.$element.hide();
        this.$element.wrap('<div class="bs-multiselect-list row"/>');
        this.$container = this.$element.parent('.bs-multiselect-list');
        this.$contAvailable = $('<div class="col-sm-6"></div>');
        this.$contSelected = $('<div class="col-sm-6"></div>');
        this.$btnAdd = $('<button class="btn btn-default">'+this.options.btnText+'</button>');

        // Selected List
        this.$listSelected = $('<ul class="list-group"/>');
        this.$listSelected.css('max-height', this.options.boxHeight+'px');
        this.$listSelected.css('overflow-y', 'auto');

        // Select element for available options
        this.$selAvailable = $('<select class="form-control" size="10"/>');
        this.$selAvailable.height(this.options.boxHeight);

        // Build the left side
        this.$contAvailable.append('<h4>'+this.options.listTitle+'</h4>');
        this.$contAvailable.append(this.$selAvailable);
       ...