Problem is when select options got changed value is not being updated.
So when I change Honda to Toyota, options in second select got changed fine, but selectedModel observable not. I must have missed something.
JavaScript:
function ViewModel() {
var self = this;
self.selectedMake = ko.observable()
self.selectedModel = ko.observable()
self.makes = ["Honda", "Toyota"];
self.models = ko.computed(function () {
if (self.selectedMake() === "Honda") return ["CRV", "Accord"];
if (self.selectedMake() === "Toyota") return ["Rav4", "Camry"];
return [];
});
}
$(function () {
ko.applyBindings(new ViewModel());
});
HTML:
<select data-bind="value: selectedMake, options: makes"></select>
<select data-bind="value: selectedModel, options: models"></select>
<p>Selected make: <b data-bind="text:selectedMake"></b></p>
<p>Selected model: <b data-bind="text:selectedModel"></b></p>
JS Fiddle: http://jsfiddle.net/apuchkov/n4VyD/