JSFiddle - React, Tailwind, and code Playground

by cleytonjordan

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<fieldset class="SearchFilter">
<legend>Search Filter</legend>
 <div class="SearchItem">
  <span>Poster:</span>
   <select id="Select1" data-bind="options: PosterList, optionsText: 'SiteName', value: selectedPoster, disable:PosterList().length <= 1, optionsCaption:select1OptionsCaption()" ></select> 
 
   <select id="Select2" data-bind="options: selectedPoster().ClientSite, optionsText: 'ClientName', optionsCaption:select2OptionsCaption(), value: selectedClient, disable: (selectedPoster().ClientSite==undefined) "></select> 
 
</div>
</fieldset>

JavaScript

var posterArray = ([
    {
    SiteId: 1,
    SiteName: "Mail",
    ClientSite: [
        {
        ClientId: 1,
        ClientName: "Mail Client A"},
        {
        ClientId: 2,
        ClientName: "Mail Client B"}]},

    {
    SiteId: 2,
    SiteName: "DSAC",
    ClientSite: [
        {
        ClientId: 1,
        ClientName: "DSAC Client A"}]},

    {
    SiteId: 3,
    SiteName: "Bank",
    ClientSite: [{}]}
]);


var ViewModel = function() {
    var self = this;
    // Poster 
    self.PosterList = ko.observableArray([]);
    ko.mapping.fromJS(posterArray, null, self.PosterList);

    self.selectedPoster = ko.observable(null);
    self.selectedClient = ko.observable(null);

    self.select1OptionsCaption = ko.computed(function() {
        if (this.PosterList().length == 0) {
            return 'No Posters';
        } else {
            return this.PosterList().length == 1 ? '' : 'Select a Poster';
        }
    }, self);

    self.select2OptionsCaption = ko.computed(function() {
        if (this.selectedPoster() == null || ko.toJS(this.selectedPoster().ClientSite) == undefined || ko.toJS(this.selectedPoster().ClientSite)[0].ClientName == null) {
            return 'No Clients';
        }
        else {
            if (this.selectedPoster() != null && ko.toJS(this.selectedPoster().ClientSite).length > 1) {
                return 'Select a client';
            }
            else if (this.selectedPoster() != null && ko.toJS(this.selectedPoster().ClientSite).length == 1) {
                return '';
            }
            else if (this.selectedPoster() != null && ko.toJS(this.selectedPoster().ClientSite).length == 0) {
                return 'No Clients';
            }
        }
    }, self);

}; // END VIEW MODEL 
var viewModel = new ViewModel();

$(function() {

    ko.applyBindings(viewModel);
});