JSFiddle - React, Tailwind, and code Playground

by Doug Hill

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<select 
    data-bind="
        options: options,
        selectedOptions : selectedOptions,
        optionsText: 'Name',
        optionsAfterRender: $root.setTitle
    "
 size="5" multiple="true"></select><br />
<button data-bind="click: showSelectedOptions">Show selection</button>

JavaScript

function Option(id, name){
    var self = this;
    
    self.Id = id;
    self.Name = name;
}

function ViewModel(){
    var self = this;
    
    self.options = ko.observableArray([
        new Option(0, "NormalText"),
        new Option(1, "AnotherText"),
        new Option(2, "WaaaaaaaaaaaaaaaayTooLongText")
    ]);
    self.selectedOptions = ko.observableArray([]);
    
    self.showSelectedOptions = function(){
        console.log(self.selectedOptions());
    }
    
    self.setTitle = function(option, item) {
        option.title = item.Name
	}     
}

ko.applyBindings(new ViewModel());