KO selectedOptions Demo

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<select data-bind="options: optionsArray, selectedOptions: selectedTypes" size="5" multiple="true"></select>

<button data-bind="click: showDialog">Add new invoice type</button>

<br/>
<span data-bind="visible: selectedTypes().length > 0"> Selected Invoice types: </span>
<ul data-bind="foreach: selectedTypes">
    <li data-bind="text: $data"/>
</ul>

<div id="dialog" style="display: none">
    Invoice types: 
    <ul data-bind="foreach: optionsArray">
        <li data-bind="text: $data"/>
    </ul>
    <br/>
    New invoice: <input data-bind="value: typeToAdd "/>
    <button data-bind="click: addType">Add</button>
</div>

JavaScript

function ViewModel(){
    var self = this;
    
    self.optionsArray = ko.observableArray(["One", "Two", "Three"]);
    self.selectedTypes = ko.observableArray(['Two']);
    
    self.typeToAdd = ko.observable();
        
    self.addType= function (){
        self.optionsArray.push(self.typeToAdd());
        self.typeToAdd("")
    };
    
    self.showDialog = function(){
        $("#dialog").dialog({ autoOpen: true});
    };
}

ko.applyBindings(new ViewModel());