I am loading 3 selects with the following model:
var viewModel = function(){
var self = this;
self.makes = [
{id: 1, name: 'Northwoods Prestige'},
{id:2, name: 'Forest Bay'},
{id:3, name: 'Timberland'}
];
self.types = [
{id: 1, make:1, name:'Special Reserve 138', patterns:['11.jpg','12.jpg']},
{id: 2, make:1, name:'Special Reserve II', patterns:['13.jpg','14.jpg']},
{id: 3, make:2, name:'TF 138', patterns:['15.jpg','16.jpg']},
{id: 4, make:2, name:'TF II', patterns:['17.jpg','18.jpg']},
{id: 5, make:3, name:'RP 25', patterns:['19.jpg','20.jpg']},
{id: 6, make:3, name:'LP 25', patterns:['21.jpg','22.jpg']}
];
self.models = [
{id:1, make:1,type: 1, name: 'Single Door'},
{id: 2, make:1,type: 1, name: 'Double Door'},
{id: 3, make:1,type: 2, name: 'Focus'},
{id: 5, make:2,type: 3, name: 'Q5'},
{id: 6, make:2,type: 3, name: 'Q7'},
{id: 7, make:2,type: 4, name: 'A3'},
{id: 8, make:2,type: 4, name: 'A4'},
{id: 9, make:2,type: 3, name: 'A6'}
];
self.selectedMake = ko.observable();
self.selectedType = ko.observable();
self.selectedModel = ko.observable();
self.carTypes = ko.computed(function(){
return ko.utils.arrayFilter(self.types, function(item){
return item.make === self.selectedMake();
});
});
self.carModels = ko.computed(function(){
return ko.utils.arrayFilter(self.models, function(item){
return item.make === self.selectedMake() && item.type === self.selectedType();
});
});
};
var model = new viewModel();
ko.applyBindings(model);
HTML:
<div>
<select id="make" data-bind="options: makes, value: selectedMake, optionsText : 'name', optionsValue : 'id'"></select><br/>
<select id="type" data-bind="options: carTypes, value: selectedType, optionsText : 'name', optionsValue : 'id'"></select><br/>
<select id="model" data-bind="options: carModels, value:selectedModel, optionsText: 'name', optionsValue : 'id'"></select>
</div>
<div>
<div data-bind="foreach: { data: carTypes, as: 'x' }">
<div data-bind="text: x.patterns"></div>
</div>
</div>
Whenever I change the select id="make" the model changes (foreach), I am trying to achieve this whenever I change values in select id="type" not the first one. Any help? Thank you
I added optionsCaption to the type selector so it does not choose one by default. You may not want that, I couldn't tell.
<select id="type" data-bind="optionsCaption:'Select...', options: carTypes, value: selectedType, optionsText : 'name', optionsValue : 'id'"></select>
I created a new computed to get the entry from carTypes that matches the selectedType:
self.matchingTypes = ko.computed(function () {
var selectedType = self.selectedType();
return ko.utils.arrayFilter(self.carTypes(), function (item) {
return item.id === selectedType;
});
});
I used that for the foreach:
<div data-bind="foreach: { data: matchingTypes, as: 'x' }">
<div data-bind="text: x.patterns"></div>
</div>
Now only the patterns associated with the selectedType are displayed.
To have images instead of text for the patterns, something like:
<div data-bind="foreach: { data: matchingTypes, as: 'x' }">
<div data-bind="foreach: x.patterns">
<img data-bind="attr:{src:$data}" />
</div>
</div>