knockout-extended demo

by adrienne

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="https://raw.github.com/DavBR/knockout-extended/master/knockout.extended.js"></script>
<div id='scope'>
		<select data-bind="options: list_a, optionsText: 'name', optionsCaption: 'Alls', optionsValue: 'id', selectedItem: a, value: valueOfa"></select>
		<select data-bind="options: list_b, optionsText: 'name', optionsCaption: 'Alls', optionsValue: 'id', selectedItem: b, value: valueOfb"></select>
		<select data-bind="options: list_c, optionsText: 'name', optionsCaption: 'Alls', optionsValue: 'id', selectedItem: c, value: valueOfc"></select>
    
    <p>Value Of a: <span data-bind="text: valueOfa"></span></p>
    <p>Value Of b: <span data-bind="text: valueOfb"></span></p>
    <p>Value Of c: <span data-bind="text: valueOfc"></span></p>
</div>

JavaScript

function CascadeExample(){
    var self = this;
    
    var list_a = [];
    var list_b = [];
    var list_c = [];
    
    var a_id = 0;
    var b_id = 0;
    var c_id = 0;
    
    for(var i=1;i<10;i++){
        list_a.push({ id: a_id, name: 'A_Item '+a_id });
        a_id++;
    }
    
    list_a.forEach(function(item){       
        for(var j=0;j<Math.floor(Math.random()*11);j++){
            list_b.push({ 
                id: b_id, 
                name: 'B_Item '+b_id+' of A_Item '+item.id, 
                a_id: item.id 
            });
            b_id++;
        }
    });
    
    list_b.forEach(function(item){       
        for(var k=0;k<Math.floor(Math.random()*11);k++){
            list_c.push({ 
                id: c_id, 
                name: 'C_Item '+c_id+' of B_Item '+item.id+' of A_Item'+item.a_id, 
                b_id: item.id 
            });
            
            c_id++;
        }
    });
    
    
    self.a = ko.observable();
    self.b = ko.observable();
    self.c = ko.observable();
    self.valueOfa = ko.observable();
    self.valueOfb = ko.observable();
    self.valueOfc = ko.observable();
    self.list_a = ko.observableArray(list_a);
    self.list_b = ko.observableArray(list_b).extend({ filter: function(i) { return self.a() ? self.a().id == i.a_id : false; } });
    self.list_c = ko.observableArray(list_c).extend({ filter: function(i) { return self.b() ? self.b().id == i.b_id : false; } });   
}
ko.applyBindings(new CascadeExample(), 'scope');