JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<select id="multiselect" multiple="multiple"></select>
CSS
.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:700
}
.multiselect-container>li>label.multiselect-group {
margin:0;
padding:3px 20px;
height:100%;
font-weight:700
}
.multiselect-container>li>a>label {
margin:0;
height:100%;
cursor:pointer;
font-weight:400
}
.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
}
JavaScript
/**
* bootstrap-multiselect.js
* https://github.com/davidstutz/bootstrap-multiselect
*
* Copyright 2012 - 2014 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) {
var listOfSelectedItems = allBindingsAccessor().selectedOptions,
config = ko.utils.unwrapObservable(valueAccessor());
$(element).multiselect(config);
if (isObservableArray(listOfSelectedItems)) {
// Subscribe to the selectedOptions: ko.observableArray
listOfSelectedItems.subscribe(function (changes) {
var addedArray = [], deletedArray = [];
changes.forEach(function (change) {
switch (change.status) {
case 'added':
addedArray.push(change.value);
break;
case 'deleted':
deletedArray.push(change.value);
break;
}
});
if (addedArray.length > 0) {
$(element).multiselect('select', addedArray);
};
if (deletedArray.length > 0) {
$(element).multiselect('deselect', deletedArray);
};
}, null, "arrayChange");
}
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var listOfItems =...