KnockoutJs 绑定列表选项选择与选项组

Question

我正在尝试将 select 与 optgroup 类似的问题绑定

KnockoutJS - Binding value of select with optgroup and javascript objects

不同之处在于页面上可能有一个或多个选择。所以我有这样的东西。

<script>

var services = ko.observableArray([
    { serviceId: 1 }, { serviceId: 2 }
]);

var servicesList = ko.observableArray([
    { Name: "Group 1", Services: [
        { Id: 1, Name: "One" },
        { Id: 2, Name: "Two" }
    ]},
    { Name: "Group 2", Services: [
        { Id: 3, Name: "Three" }
    ]}
]);

</script>

<div class="form-group" data-bind="foreach: services">
    <label for="ServiceId" class="control-label col-md-2">Service</label>
    <div class="col-md-10">
        <select id="ServiceId" name="ServiceId" class="form-control" data-bind="foreach: servicesList, value: serviceId">
            <optgroup data-bind="attr: {label: Name}, foreach: Services">
                <option data-bind="text: Name, option: Id"></option>
            </optgroup>
        </select>
    </div>
</div>

问题是没有选择每个选择的值。

Answer 1

serviceId 用作 selectList 中的值，因此它应该是可观察的，并且 servicesList 应该与父上下文一起使用。

    //make observable to keep track selected value
    self.services = ko.observableArray([{
       serviceId: ko.observable(1)
     }, {
      serviceId: ko.observable(2)
    }]);


    //$parent.servicesList
    <select id="ServiceId" name="ServiceId" class="form-control" data-bind="foreach: $parent.servicesList, value: serviceId">
        <optgroup data-bind="attr: {label: Name}, foreach: Services">
            <option data-bind="text: Name,value:Id, option: Id"></option>
        </optgroup>
    </select>

Fiddle Demo