JSFiddle - React, Tailwind, and code Playground

by randynwalsh

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://fishandgame.idaho.gov/ifwis/jsb/js/spectrum.js"></script>
<link rel="stylesheet" href="http://fishandgame.idaho.gov/ifwis/jsb/css/jsb_servercss.css">
<div data-bind="foreach: rows">
    <div data-bind="text: name"></div>
    <input type='text' data-bind="value: color, event: { change: $root.itemChanged }" />
    <select data-bind="options:$root.getOpts($data), value: $root.findMe($data), optionsText: 'val', event: { change: $root.itemChanged2 }"></select>
    <br/>
</div>

JavaScript

// Knockout Example
    data = []
    data.push({name:'randy', color: 'a1', f1: 'test1'})
    data.push({name:'matthew', color: 'a2', f1: 'test2' })
    
    m = {}
    m.rows = ko.observableArray(data)
    m.opts = {}
    m.itemChanged = function(row) {
      var id = row.name;
        row.f1 = '' // clear our child
      setTimeout(function() { loadOpts(row, m.opts[id]) }, 1200);
    }
    
     m.itemChanged2 = function(row) {
        alert('changed2 ' + row.color )
    }
     
    m.getOpts = function(row) {
        var id = row.name;

        if (!m.opts[id]) {
            m.opts[id] = ko.observableArray([])
            setTimeout(function() { loadOpts(row, m.opts[id]) }, 1200);
        }

        return m.opts[id]
    }
    
     m.findMe = function(row) {
         var options = m.opts[row.name]()
         if (!options) return null;
         for (var i=0; i < options.length; i++ ) {
             var o = options[i];
             if (row.f1 == o.val) { return o;  }
         }
         // Not found
         var newOpt = { val: row.f1 }
         options.push(newOpt);
         return newOpt;
     }
     // Use ID to get data
     // Put result array into options
     // 
     function loadOpts(row, options) {
    
         var newArray = []
         newArray.push({val: ''});
         newArray.push({val: row.color});
         newArray.push({val: 'test1'});
         newArray.push({val: 'test2'});
         
         options().length = 0
         ko.utils.arrayPushAll(options(), newArray);
         options.valueHasMutated();

     }
    ko.applyBindings(m);