JSFiddle - React, Tailwind, and code Playground

by fabienpenso

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://davidstutz.github.io/bootstrap-multiselect/js/bootstrap.min.js"></script>
<script src="http://davidstutz.github.io/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/css/bootstrap.min.css">
<select data-bind="value: selected_tags, options: available_tags" multiple="multiple" name="" id="tags"></select>
<br/>
<br/>
<select id="tags2" data-bind="multiselect: true, options: Foobars, selectedOptions: SelectedFoobars" multiple="multiple"></select>
<br />
<br />
<p data-bind="with: selected_tags">yo</p>

JavaScript

function MyViewModel() {
    this.available_tags = ['foo', 'bar'];
    this.selected_tags = ko.observable('');

    this.Foobars = ko.observableArray(['fu', 'fool']);
    this.SelectedFoobars = ko.observableArray([]);
}

var viewModel = {
    available_tags: ko.observableArray(['foo2', 'bar2']),
    selected_tags: ko.observableArray(),
    Foobars: ko.observableArray(['foo3', 'bar3']),
    SelectedFoobars: ko.observableArray(['foo4', 'bar'])
};

//$('#tags').multiselect();
//$('#tags2').multiselect();

//ko.applyBindings(new MyViewModel());
ko.applyBindings(viewModel);