JSFiddle - React, Tailwind, and code Playground

by robgallen

HTML

<em>Playing around with multi-selects</em>
<select class="chosen-select" data-placeholder="Select option(s)" style="width:100%" multiple="multiple" data-bind="options: lookupItems, selectedOptions: selectedListItems">
                            </select>
<button data-bind="click: setData">Add three</button>
<hr/>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

JavaScript

var viewModel = function () {
    var self = this;
    self.lookupItems = ko.observableArray(["one", "two", "three", "four", "five", "six"]);
    self.selectedListItems = ko.observableArray(["two"]);
    
    self.setData = function() {
        self.selectedListItems.push("three")
    }
};

ko.applyBindings(new viewModel());