select options ko

by Jorge Bustos Pereda

HTML

<script src="https://code.jquery.com/jquery-1.11.0.js"></script>
<div id="foreach">
    <h1>Using foreach</h1>
    <select data-bind="foreach: animals,
            value: foreachAnimal">
        <option data-bind="text: $data.Name,
            value: $data.Key
        "></option>
    </select>
</div>
<div id="options">
    <h1>Using options</h1>
    <select data-bind="options: animals, 
        optionsText: 'Name',
        optionsCaption: 'Select an animal',
        value: optionsAnimal">
    </select>
    <select data-bind="options: animals, 
        optionsText: 'Name',
        optionsCaption: optionsUnselected,
        value: optionsAnimal">
    </select>
</div>
<div class='topBorder' id='showModel'>
    <p>foreach: <span data-bind="text: foreachAnimal"></span></p>
    <p>options: <span data-bind=
        "text: optionsAnimal() ? optionsAnimal().Key : null"></span></p>
    <pre data-bind='text: ko.toJSON($root,null,2)'></pre>
</div>

CSS

h1,h2,h3,h4,h5,h6 {
    font-family: verdana;
}
h1 {
    font-size: 16pt;
}
h2 {
    font-size: 14pt;
}
h3 {
    font-size: 13pt;
}
.topBorder {
    border-top: solid 1px #DDD;
    margin-top: 15px;
}
}

JavaScript

var model = {
    animals: ko.observableArray([
        { Name: 'Bird', Key: 'B'},
        { Name: 'Cat', Key: 'C'},
        { Name: 'Dog', Key: 'D'}
    ]),
    foreachAnimal: ko.observable(),
    optionsAnimal: ko.observable(),
    optionsUnselected: 'Choose an animal!!'
};
// To be able to see the model in developer's console
window.model = model;

ko.applyBindings(model, document.getElementById('foreach'));
ko.applyBindings(model, document.getElementById('options'));
ko.applyBindings(model, document.getElementById('showModel'));