You can use the enable
binding to connect the previous select value
with the second select.
So when you select something in the first dropwdown the firstValue
will contain the selected value so the enable: firstValue
will be true and it will enable the second dropdown
<select data-bind="options: options, optionsText: 'value',
optionsCaption: '', value: firstValue"></select>
<select data-bind="options: secondOptions, optionsText: 'value',
optionsCaption: '',value: secondValue,
enable: firstValue"></select>
To solve the "cascading" you can use computed properties to fill in the options with filtering out the already selected values:
var VM = function () {
this.options = ko.observableArray(/* load your original options here */);
this.firstValue = ko.observable();
this.secondValue = ko.observable();
this.secondOptions = ko.computed(function () {
return ko.utils.arrayFilter(this.options(), function (item) {
return item != firstValue();
});
}, this);
}
And apply these patterns for the other 3 dropdowns.
Demo JSFiddle.