Cascading dropdowns

by Keith Lott

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<select data-bind="options: UsageTypes, optionsText: 'UsedType', optionsValue: 'UsedTypeID', value: UsedTypeID"></select>
<select data-bind="options: UsageFiltered, optionsText: 'UsedOn', optionsValue: 'UsedOnID', optionsCaption: 'select...', value: UsedOnID, visible:UsedTypeID"></select>

<p data-bind="text: ko.toJSON(viewModel)"></p>

JavaScript

var data = {"SupplierID":"4","UsedTypeID":"U","UsedOnID":0} ;

var viewModel = ko.mapping.fromJS(data);

viewModel.UsageTypes = ko.observableArray( [{"UsedTypeID":"P","UsedType":"Product"},{"UsedTypeID":"S","UsedType":"Series"},{"UsedTypeID":"U","UsedType":"Unknown"}]);
viewModel.UsagesList = ko.observableArray(
[{"UsedTypeID":"P","UsedType":"Product","UsedonID":14,"UsedOn":"banana"},
 {"UsedTypeID":"P","UsedType":"Product","UsedonID":16,"UsedOn":"kjhkjhkj"},
 {"UsedTypeID":"P","UsedType":"Product","UsedonID":7,"UsedOn":"prod1234"},
 {"UsedTypeID":"P","UsedType":"Product","UsedonID":15,"UsedOn":"things"},
 {"UsedTypeID":"P","UsedType":"Product","UsedonID":20,"UsedOn":"thinkgs2"},
 {"UsedTypeID":"S","UsedType":"Series","UsedonID":17,"UsedOn":";lkgd;ldf"},
 {"UsedTypeID":"S","UsedType":"Series","UsedonID":18,"UsedOn":"df;lkjdflk"},
 {"UsedTypeID":"S","UsedType":"Series","UsedonID":13,"UsedOn":"fdsdfsdf"},
 {"UsedTypeID":"S","UsedType":"Series","UsedonID":12,"UsedOn":"mn,m,m,"},
 {"UsedTypeID":"S","UsedType":"Series","UsedonID":19,"UsedOn":"rubberchicken"},
 {"UsedTypeID":"S","UsedType":"Series","UsedonID":11,"UsedOn":"sdfsdfsdf"},
 {"UsedTypeID":"U","UsedType":"Unknown","UsedonID":0,"UsedOn":"Unknown"}]);
    
viewModel.UsageFiltered = ko.computed(function(){
    var filter = this.UsedTypeID();
    if (!filter){
        return this.UsagesList();
    } else {
        return ko.utils.arrayFilter(this.UsagesList(), function(item) {
            return filter === item.UsedTypeID    
        }); 
    }
}, viewModel);

ko.applyBindings(viewModel);