JSFiddle - React, Tailwind, and code Playground

by Doug Hill

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="https://rawgithub.com/rniemeyer/knockout-postbox/master/build/knockout-postbox.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<table>
    <tr>
        <td><b>Country:&nbsp;</b></td>
        <td><select data-bind="options: countryModel.country, optionsText: 'Code', value: countryModel.countryselected, optionsCaption: 'Choose...'"></select></td>
    </tr>
    <tr>
        <td><b>Product:&nbsp;</b></td>
        <td><select data-bind="options: productModel.product, optionsText: 'Code', value: productModel.productselected, optionsCaption: 'Choose...'"></select></td>
    </tr>
</table>
<br />
<br />
<div>ProductCode</div>
<div data-bind="with: productCodeModel">
    <span data-bind="text: productCode"></span>
    <span data-bind="text: productCode2"></span>
</div>

JavaScript

var LookupData1 = 
 [{"$id":"1","Code":"AMERICA","Value":"A"},
  {"$id":"2","Code":"FRANCE","Value":"F"},
  {"$id":"3","Code":"GERMANY","Value":"G"}] 

var LookupData2 = 
 [{"$id":"1","Code":"Product1","Value":"1001"},
  {"$id":"2","Code":"Product2","Value":"1002"},
  {"$id":"3","Code":"Product3","Value":"1003"}] 

var CountryViewModel = function () {
    
    var self = this;
    
    self.country = ko.observableArray(LookupData1);
    self.countryselected = ko.observable().publishOn("countryselected");
};

var ProductViewModel = function() {
    
    var self = this;
    
    self.product = ko.observableArray(LookupData2);
    self.productselected = ko.observable().publishOn("productselected");
};

var ProductCodeModel = function () {
    this.country = ko.observable().subscribeTo("countryselected");
    this.product = ko.observable().subscribeTo("productselected");
    
    this.productCode = ko.computed(function() {
            if(this.country() && this.product())
                return this.country().Code + this.product().Code;
            else
                return "Please Make Selection Above";
        }, this);
};

var masterVM = {
    countryModel: new CountryViewModel(),
    productModel: new ProductViewModel(),
    productCodeModel: new ProductCodeModel()
};

ko.applyBindings(masterVM);