JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<select data-bind="options: List1Items,
optionsText: 'name',
value: List1SelectedItem,
optionsCaption: 'Please Select...'"></select>
<br/>
<select data-bind="visible: List1SelectedItem,
options: List2Items,
optionsText: 'name',
value: List2SelectedItem,
optionsCaption: 'Please Select...'"></select>
<br/>
<select data-bind="visible: List2SelectedItem,
options: List3Items,
optionsText: 'name',
value: List3SelectedItem,
optionsCaption: 'Please Select...'"></select>
JavaScript
var list1Items = '[{"id": "1","name": "list1item1"},{"id": "2","name": "list1item2"}]';
var list2Items = '[{"id": "1","name": "list2item1"},{"id": "2","name": "list2item2"}]';
var list3Items = '[{"id": "1","name": "list3item1"},{"id": "2","name": "list3item2"}]';
ViewModel = function () {
var self = this;
self.List1 = ko.mapping.fromJSON(list1Items);
self.List1SelectedItem = ko.observable();
self.List1SelectedItem.subscribe(function () {
self.List2([]);
self.List2SelectedItem(undefined);
//ajaxcall to populate list 2
self.List2(ko.mapping.fromJSON(list2Items)());
});
this.List2 = ko.observableArray();
self.List2SelectedItem = ko.observable();
self.List2SelectedItem.subscribe(function () {
self.List3([]);
self.List3SelectedItem(undefined);
//ajaxcall to populate list 3
self.List3(ko.mapping.fromJSON(list3Items)());
});
this.List3 = ko.observableArray();
self.List3SelectedItem = ko.observable();
}
ko.applyBindings(new ViewModel());