JSFiddle - React, Tailwind, and code Playground

by Swapnil Dubey

HTML

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<form>
	<table border="1" id="dbResultsTable" class="table table-striped">
				<thead>
					<tr>
						<th style="width: 30px;">Select</th>
						<th>IpAddress</th>
						<th>multiSelect</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td style="width: 44px;"><input type="checkbox"
							name="checkbox" value="checkbox"></td>
						<td>10.20.30.40</td>
						<td><select name="applicationNames[]"  class="applicationNameSelectClass" multiple="multiple" data-target="#">
															<option value="option1">option1</option>
															<option value="option2">option2</option>
															<option value="option3">option3</option> 
															<option value="option3">option3</option>
															<option value="option4">option4</option>
														</select></td>
					</tr>
					<tr>
						<td style="width: 44px;"><input type="checkbox"
							name="checkbox" value="checkbox"></td>
						<td>210.132.34.10</td>
						<td><select name="applicationNames[]"  class="applicationNameSelectClass" multiple="multiple" data-target="#">
															<option value="option1">option1</option>
															<option value="option2">option2</option>
															<option value="option3">option3</option> 
															<option value="option3">option3</option>
															<option value="option4">option4</option>
														</select></td>
					</tr>
					<tr>
						<td style="width: 44px;"><input...

JavaScript

// Due to bootstrap-multiselect.js not being available on CDN, it's included first below.

/**
 * bootstrap-multiselect.js 1.0.0
 * 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.
 * See the README.
 */
!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.getOptions(options);
        this.$select = $(select);
        this.originalOptions = this.$select.clone()[0].options;
        //we have to clone to create a new reference
        this.query = '';
        this.searchTimeout = null;

        this.options.multiple = this.$select.attr('multiple') == "multiple";

        this.$container = $(this.options.buttonContainer).append('<button type="button" class="multiselect dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText(this.getSelected(), this.$select) + '</button>')
            .append('<ul class="multiselect-container dropdown-menu' + (this.options.dropRight ? ' pull-right' : '') + '"></ul>');

       ...