Dropdowns with Flat Data

by straeger

HTML

<div>
    <select id="make" data-bind="options: makes, value: selectedMake, optionsText : 'name', optionsValue : 'id', optionsCaption : 'Select your make'"></select><br/>
    <select id="type" data-bind="options: carTypes, value: selectedType, optionsText : 'name', optionsValue : 'id', optionsCaption : 'Select your type'"></select><br/>
    <select id="model" data-bind="options: carModels, value:selectedModel, optionsText: 'name', optionsValue : 'id', optionsCaption:'Select your model'"></select>
</div>

JavaScript

var viewModel = function(){
    var self = this;
    self.makes = [
        {id: 1, name: 'Ford'},
        {id:2, name: 'Audi'}
    ];
 
    self.types = [
        {id: 1, make:1, name:'Truck'},
        {id: 2, make:1, name:'Car'},
        {id: 3, make:2, name:'Crossover'},
        {id: 4, make:2, name:'Car'}
    ];
 
    self.models = [
        {id:1, make:1,type: 1, name: 'F150'},
        {id: 2, make:1,type: 1, name: 'Superduty'},
        {id: 3, make:1,type: 2, name: 'Focus'},
        {id: 4, make:1,type: 2, name: 'Mustang'},
        {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);