Bootstrap 3 - Multi Select
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="col-sm-12">
<div id="vm" class="tab-pane fade in active">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="panel-title"><i class="fa fa-linux"></i> Machines Virtuelles</span>
</div>
<div class="panel-body">
<form action="/Lab/Rtx/etabs/edit/0451483t" id="ServerEditForm" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST">
</div>
<div class="col-md-8">
<div class="form-group">
<input type="hidden" name="data[Server][0][id]" class="form-control" value="1" id="Server0Id">
<div class="controls">
<label for="Server0Vm">hosta0451483t</label>
<input type="hidden" name="data[Server][0][Vm]" value="" id="Server0Vm_">
<select name="data[Server][0][Vm][]" class="multiselect" multiple="multiple" id="Server0Vm">
<optgroup label="Lxc">
<option value="ctrlr0451483t">ctrlr0451483t</option>
<option value="ipr0451483t">ipr0451483t</option>
<option value="ldap0451483t">ldap0451483t</option>
<option value="proxy0451483t">proxy0451483t</option>
<option value="fwpeda0451483t">fwpeda0451483t</option>
<option value="opsi0451483t">opsi0451483t</option>
<option value="commr0451483t">commr0451483t</option>
...
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 (Array.prototype.forEach === null || Array.prototype.forEach === undefined) {
Array.prototype.forEach = function (func) {
var index;
for (index = 0; index < this.length; ++index) {
func(this[index]);
}
};
}
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) {
...