Binding html nested select statements with knockout js

I think what you have here is generally against the grain when it comes to knockout.js. Your view model(s) should be constructed in such a way that they provide an accurate representation of your data.

Instead, I would create a separate StartOption view model object to act as the "values" of the two drop-downs. Each StartOption would have an observable array for the sub-options, and then your main view model would have a list of StartOptions for the first-level objects, and each of those would have a list of the level-two items.

Something like this:

<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>

And then the JS:

var StartOption = function(value, text, options) {
    var self = this;
    self.value = ko.observable(value);
    self.text = ko.observable(text);
    self.subOptions = ko.observableArray(options || []);
};

var ViewModel = function() {
    var self = this; 

    self.startApps = ko.observableArray([
        new StartOption('value1', 'Some Val 1', [
            new StartOption('path1', 'Page 1')
        ]),
        new StartOption('value2', 'Some Val 2', [
            new StartOption('path2', 'Page 2')
        ]),
        new StartOption('value3', 'Some Val 3', [
            new StartOption('path3', 'Page 3'),
            new StartOption('path4', 'Page 4')
        ])
    ]);

    self.selectedStartApp = ko.observable();
    self.selectedStartPage = ko.observable();
};

ko.applyBindings(new ViewModel());

Working Demo of Above

Or perhaps you want to load the options from the server via AJAX, and your JSON response looks like:

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' }
         ]
     }
];

You could use the knockout-mapping plug-in to do some of the heavy lifting for you so you can simplify your view models:

var StartOption = function(data) {
    var self = this;
    // map the properties of the data object as observables
    // on this object; if we encounter "subOptions", make them
    // instances of this object as well
    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);

Working Demo of Above