JSFiddle - React, Tailwind, and code Playground

by jhorvath

HTML

<div><button data-bind="click: addRows"></button></div>
<div>
    <select data-bind="options: availableEntities, optionsText: 'Label', value: selectedEntity"></select>
</div>
<div>
<!--ko with: selectedEntity -->
<select data-bind="options: Fields, optionsText: 'Label', value: selectedEntity"></select>
<!--/ko -->
</div>
<div>
    <span data-bind="text: selectedEntity() != null ? selectedEntity().Label : ''"></span>
</div>

JavaScript

var accountFields = [ { Label: "Name" }, { Label: "Address" }, { Label: "Number" } ];
var contactFields = [ { Label: "FullName" }, { Label: "Address"}, { Label: "Street" } ];
var projectFields = [ { Label: "ProjectId" }, { Label: "Client" }, { Label: "Value" }];

var vm = function(){
    this.availableEntities = [ { Label: "Account", Id: 1, Fields: accountFields }, { Label: "Contact", Id: 2, Fields: contactFields }, { Label: "Project", Id: 3, Fields: projectFields }];
    this.rows = ko.observableArray([]);
    this.addRows = function() {
        this.rows.push({ selectedEntity: ko.observable(null) })
    }.bind(this);
}

var viewModel = new vm();
ko.applyBindings(viewModel);