JSFiddle - React, Tailwind, and code Playground

by Randy Crews

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<select data-bind="options: list1, optionsText:'name', optionsCaption:'Select...', value: name, selectedOptions: ValidateOption"></select>
<table>
    <tr>
        <td>
            <div data-bind="foreach: list2"><input type="checkbox" data-bind="checked: $parent.myAttributes, value:name" /><span data-bind="text: name"/></div>
        </td>
    </tr>
    <tr>
    <td>
        <div data-bind="foreach: myAttributes"> <span class="selectedName" data-bind="text: $data"/> </div>
    </td>
    </tr>
</table>

CSS

.selectedName{
 margin:5px;
}

JavaScript

var myViewModel = function() {
    var self = this;
    
    //container for holding selected items
    self.myAttributes = ko.observableArray();
    
    //used for binding dropdown
    self.list1 = ko.observableArray([
        { name: "TransactionNumber", isFilter: "false"}, {name: "CaseNumber", isFilter: "false"}, {name: "DateEntered", isFilter: "true"}
    ]);
    
    //used for binding checkboxes
    self.list2 = ko.observableArray([
        { name: "DateEntered" }, {name: "EditedBy" }, {name: "DateEdited" }
    ]); 
    
    //selectd item validation - this function will check the selected item against the myAttributes array 
    //to determine if the value can be added to the array as a potential filter
    self.ValidateOption = function(){
    };
};

ko.applyBindings(new myViewModel());