Knockout.js 基于observableArray使用optgroup构建淘汰选择

我开发了一个项目。我找到了一种让我的select使用knockout绑定和optgroup的方法。以下是解决方案：

不幸的是，此解决方案使用静态模型来填充select中的“option”和“optgroup”

出于我个人的需要，我想要一些更有活力的东西。我想从数据库提供的observableArray开始。这个耳环看起来像这样：

var vehicles = ko.observableArray([
    {
     Id: 1,
     Brand: "Volkswagen",
     Type: "Golf"
    },
    {
     Id: 2,
     Brand: "Volkswagen",
     Type: "Sharan" 
    },
    {
     Id: 3,
     Brand: "BMW",
     Type: "118i"
    }
    {
     Id: 4,
     Brand: "BMW",
     Type: "525D"
    }
 ]);

我的问题：是否有可能基于此单个observableArray的解决方案来构建select。也许可以借助计算属性来检索optgroup/options

---

谢谢。

以下是一种方法。它不是最优的，但效果很好：

var ViewModel = function () {
    var self = this;
    self.vehicles = ko.observableArray([{
        Id: 1,
        Brand: "Volkswagen",
        Type: "Golf"
    }, {
        Id: 2,
        Brand: "Volkswagen",
        Type: "Sharan"
    }, {
        Id: 3,
        Brand: "BMW",
        Type: "118i"
    }, {
        Id: 2,
        Brand: "BMW",
        Type: "525D"
    }]);

    self.brands = ko.computed(function(){
        var list = ko.utils.arrayMap(self.vehicles(), function(item){
            return item.Brand;
        });

        return ko.utils.arrayGetDistinctValues(list);
    });
};

ko.applyBindings(new ViewModel());

<select data-bind="foreach: brands">
    <optgroup data-bind="attr: {label: $data}, foreach: $parent.vehicles">
    <!-- ko if: Brand == $parent -->
        <option data-bind="text: Type"></option>
    <!-- /ko -->
    </optgroup>
</select>

var ViewModel=函数（）{
var self=这个；
self.vehicles=ko.array([{
Id:1，
品牌：“大众”，
类型：“高尔夫”
}, {
Id:2，
品牌：“大众”，
类型：“Sharan”
}, {
Id:3，
品牌：“宝马”，
类型：“118i”
}, {
Id:2，
品牌：“宝马”，
类型：“525D”
}]);
self.brands=ko.computed（函数（）{
var list=ko.utils.arrayMap（self.vehicles（），函数（项）{
退货项目。品牌；
});
返回ko.utils.arrayGetDistinctValue（列表）；
});
};
应用绑定（新的ViewModel（））；

---

小提琴手：

非常感谢。你帮了我很多。哇-我从来没有意识到这是一个内置功能。当我看到这种风格时，我总是认为这是一种习惯（尽管有点难看）下拉列表。现在我想为了它而使用它：-）