JSFiddle - React, Tailwind, and code Playground

by KevinGabbert

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<select data-bind="options: dropDownLists.Region,optionsText:'RegionName',value:regionFilter"></select>

<p>ID: <span data-bind="text: regionFilterId"></span></p>
<p>Caption: <span data-bind="text: regionFilterName"></span></p>

JavaScript

var ViewModel = new function() {
    var self = this;

    self.dropDownLists = {
        Region: ko.observableArray([
            { RegionName: 'Region 1', RegionId: 1 },
            { RegionName: 'Region 2', RegionId: 2 },
            { RegionName: 'Region 3', RegionId: 3 },
            { RegionName: 'Region 4', RegionId: 4 },
            { RegionName: 'Region 5', RegionId: 5 }
        ])
    };

    self.regionFilter = ko.observable();
    self.regionFilterId = ko.computed(function() {
        var region = self.regionFilter();
        if (region) { return region.RegionId; }
    });
    
    self.regionFilterName = ko.computed(function() {
        var region = self.regionFilter();
        if (region) { return region.RegionName; }
    });
}();

ko.applyBindings(ViewModel);