Example cascading dropdowns
HTML
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<input type="text" data-bind="value: searchValue, valueUpdate: 'afterkeydown'"></input>
<select data-bind="options: firstDataComputed, value: firstValue"></select>
<select data-bind="options: secondDataComputed, value: secondValue"></select>
<select data-bind="options: thirdDataComputed, value: thirdValue"></select>
JavaScript
function ViewModel() {
this.searchValue = ko.observable();
this.firstValue = ko.observable();
this.secondValue = ko.observable();
this.thirdValue = ko.observable();
this.firstData = ko.observableArray(['', 'Ninja1', 'Ninja2', 'Ninja3']);
this.secondData = ko.observableArray(['', 'Ninja4', 'Ninja5', 'Ninja6']);
this.thirdData= ko.observableArray(['', 'Ninja7', 'Ninja8', 'Ninja9']);
this.firstDataComputed = ko.computed(function() {
if (this.searchValue()) {
// Satify your search result
if(this.searchValue().length > 2) {
// Update data (probably from AJAX)
return this.firstData();
} else {
return ko.observableArray(['']);
}
}
},this);
this.secondDataComputed = ko.computed(function() {
var val = this.firstValue();
if (val !== undefined){
if(val.length > 0) {
return this.secondData();
}
} else {
return ko.observableArray(['']);
}
}, this);
this.thirdDataComputed = ko.computed(function() {
var val = this.secondValue();
if (val !== undefined){
if(val.length > 0) {
return this.thirdData();
}
} else {
return ko.observableArray(['']);
}
}, this);
};
ko.applyBindings(new ViewModel());