Javascript KnockoutJs绑定列表选项使用选项组进行选择

我正在尝试将select与optgroup绑定，类似于此问题

区别在于页面上可能有一个或多个选择。所以我有类似的东西

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

var服务=ko.observableArray([
{serviceId:1}，{serviceId:2}
]);
var servicesList=ko.array([
{名称：“第1组”，服务：[
{Id:1，名称：“一”}，
{Id:2，名称：“两”}
]},
{名称：“第2组”，服务：[
{Id:3，名字：“三”}
]}
]);
服务

---

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

serviceId用作选择列表中的值，因此它应该是可观察的，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>

//使其可观察以跟踪所选值
self.services=ko.array([{
服务ID:ko.可观察（1）
}, {
服务ID:ko.可观察（2）
}]);
//$parent.servicesList

---

此小提琴演示无法按预期工作。列表中的第二个服务显示“一”，而它应该显示“二”。对不起，这是我的错误。您需要在选项中提供值绑定，然后它将按预期工作。看最新的小提琴。谢谢，你是一个传奇。