JSFiddle - React, Tailwind, and code Playground

by Doug Hill

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<div id="upper">
    <select data-bind="options: optionsUpper, optionsText: 'data', value: selectedOptionUpper, select2: {}"></select>
</div>
<div id="lower">
    <select data-bind="options: selectedOptionUpper() ? selectedOptionUpper().items : [], value: selectedOptionLower" size="5"></select>
</div>
<input type="button" data-bind="click: showData" value="Show" />

CSS

select {
    width: 100px;
}

JavaScript

ko.bindingHandlers.select2 = {
    init: function (element, valueAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor());

        jQuery(element).select2(options);
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            jQuery(this).select2('destroy');
        });
    },
    update: function (element, valueAccessor) {
        jQuery(element).trigger('change');
    }
};

function ViewModel() {
    var self = this;
    
    self.selectedOptionUpper = ko.observable();
    self.selectedOptionLower = ko.observable();
    self.optionsUpper = [
        { data: 1, items: [ 'one', 'two', 'three' ]},
        { data: 2, items: [ 'a', 'b', 'c' ]}
        ];
    self.showData = function() {
        alert('upper: ' + self.selectedOptionUpper().data + ', lower: ' + self.selectedOptionLower());
    };
}

ko.applyBindings(new ViewModel());