dependent select options values using knockoutjs

by Keyur Patel

HTML

<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<div class="apps">
    <select id="startapp" name="startapp" data-bind="options: startApps, optionsText: 'text', value: selectedStartApp, optionsCaption: 'Choose...'">
    </select>
</div>
<div class="pages" data-bind="with: selectedStartApp">
     <select id="startpage" name="startpage" data-bind="options: subOptions, optionsText: 'text', value: $root.selectedStartPage">
     </select>
</div>

JavaScript

var sampleData = [
    { value: 'value1', text: 'Some Val 1', subOptions: [
        { value: 'path1', text: 'Page 1' }
    ]},
    { value: 'value2', text: 'Some Val 2', subOptions: [
        { value: 'path2', text: 'Page 2' }
    ]},
    { value: 'value3', text: 'Some Val 3', subOptions: [
        { value: 'path3', text: 'Page 3' },
        { value: 'path4', text: 'Page 4' }
    ]}
];

var StartOption = function(data) {
    var self = this;
    ko.mapping.fromJS(data || {}, {
        'subOptions': {
            create: function(options) {
                return new StartOption(options.data);   
            }
        }
    }, self);
};

var ViewModel = function() {
    var self = this; 
    
    self.startApps = ko.observableArray();
    
    self.load = function(data) {
        self.startApps(ko.utils.arrayMap(data || [], function(option) {
            return new StartOption(option);
        }));
    };
    
    self.selectedStartApp = ko.observable();
    self.selectedStartPage = ko.observable();
};

var viewModel = new ViewModel();
viewModel.load(sampleData); 

ko.applyBindings(viewModel);