JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<select >
     <option data-bind="text: ''"></option>
     <!-- ko foreach: brands -->
        <optgroup data-bind="attr: {label: $data}, foreach: $parent.vehicles">
            <!-- ko if: Brand == $parent -->
                <option data-bind="text: Type"></option>
            <!-- /ko -->
        </optgroup>
    <!-- /ko -->
</select>

JavaScript

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);
    });
};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);

viewModel.vehicles.push({Id:5,Brand: "Mercedes",Type:"Eas250"});