combo fiddle

ko

by dingen2010

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<div id="liveExample" class="liveExample">
    <p>Choose a ticket class:
        <select data-bind="options: tickets, 
                       optionsCaption: 'Choose...',
                       optionsText: 'name',
                       value: chosenTicket">
            <option value="">Choose...</option>
            <option value="">Economy</option>
            <option value="">Business</option>
            <option value="">First Class</option>
        </select>
        <button data-bind="enable: chosenTicket, 
                       click: resetTicket">Clear</button>
    </p>
    <p data-bind="with: chosenTicket">You have chosen <b data-bind="text: name">Economy</b>
($<span data-bind="text: price">199.95</span>)</p>
</div>

JavaScript

function TicketsViewModel() {
    this.tickets = [{
        name: "Economy",
        price: 199.95
    }, {
        name: "Business",
        price: 449.22
    }, {
        name: "First Class",
        price: 1199.99
    }];
    this.chosenTicket = ko.observable();
    this.resetTicket = function () {
        this.chosenTicket(null)
    }
}
ko.applyBindings(new TicketsViewModel(), document.getElementById("liveExample"));