Construct a knockout SELECT with optgroup based on observableArray

Question

I develop a project with knockout. I found a way to have my select with knockout binding and optgroup. Here is the solution: http://jsfiddle.net/HPhmB/3/

Unfortunately this solution use a static model for populating 'option' & 'optgroup' in the select.

For my personal need, I would like something more dynamic. I would like to start with an observableArray provided from a database. This observableArray looks something like this:

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"
    }
 ]);

enter image description here

My question: is it possible to have a solution based on this single observableArray to construct the select. Maybe with the help of computed properties to retrieve the optgroup/options?

Thanks.

Wow - I never realized this was a built-in feature. I always assumed when I saw this style that it was a custom (albeit kinda ugly) dropdown. Now I want to use it for the sake of it :-) — Simon_Weaver
– Simon_Weaver, Commented Nov 26, 2017 at 6:34

Artem Vyshniakov · Accepted Answer · 2013-04-11 12:32:34Z

Here is one of the ways to do this. It is not optimal but works well:

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>

Fiddle: http://jsfiddle.net/HPhmB/55/

Collectives™ on Stack Overflow

Construct a knockout SELECT with optgroup based on observableArray

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related