对于这种情况，一个好的选择是创建一个快速自定义绑定，让您的“手工”选项以与options绑定创建的选项相同的方式运行（将对象作为元数据附加）。

ko.bindingHandlers.option = {
    update: function(element, valueAccessor) {
       var value = ko.utils.unwrapObservable(valueAccessor());
       ko.selectExtensions.writeValue(element, value);   
    }        
};

您可以像这样使用它：

<select data-bind="foreach: groups, value: selectedOption">
    <optgroup data-bind="attr: {label: label}, foreach: children">
        <option data-bind="text: label, option: $data"></option>
    </optgroup>
</select>

示例：http://jsfiddle.net/rniemeyer/aCS7D/

此带有标题的版本，如果要选择父项：

<select data-bind="value: selectedOption ">
    <option data-bind="value:'', text:'Select'"></option>
    <!-- ko foreach: groups -->
        <optgroup data-bind="attr:{label: label}">
            <option data-bind="value: $data, text:label"></option>
            <!-- ko foreach: children -->
                <option data-bind="value: $data, text:label"></option>
            <!-- /ko -->
        </optgroup>
    <!-- /ko -->
</select>

如果你想完全控制标题、组和选项，并在select元素上绑定值，你必须确保在绑定select元素的值绑定之前绑定所有选项，否则一旦添加了标题选项，值绑定就会清空selectedOption。
例如，您可以添加一个自定义的valueAfterChildren绑定，它 Package 了值绑定并确保children are bound first。请看下面的示例，它在应用绑定之前，在稍微简化的视图模型上预先选择了“Option 5”：
第一个