Destination country:

<p>Destination country:<select data-bind="options: availableCountries"></select>
</p><script type="text/javascript">var viewModel = {// These are the initial options
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain'])};// ... then later ...
    viewModel.availableCountries.push('China'); // Adds another option
</script>

Choose some countries you would like to visit:

<p>Choose some countries you would like to visit:<select data-bind="options: availableCountries" size="5" multiple="true"></select>
</p><script type="text/javascript">var viewModel = {availableCountries: ko.observableArray(['France', 'Germany', 'Spain'])};
</script>

Your country:

<p>Your country:<select data-bind="options: availableCountries,optionsText: 'countryName',value: selectedCountry,optionsCaption: 'Choose...'"></select>
</p><div data-bind="visible: selectedCountry"> <!-- Appears when you select something -->You have chosen a country with population<span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>.
</div><script type="text/javascript">// Constructor for an object with two propertiesvar Country = function(name, population) {this.countryName = name;this.countryPopulation = population;};var viewModel = {availableCountries : ko.observableArray([new Country("UK", 65000000),new Country("USA", 320000000),new Country("Sweden", 29000000)]),selectedCountry : ko.observable() // Nothing selected by default
    };
</script>

<!-- Same as example 3, except the <select> box expressed as follows: -->
<select data-bind="options: availableCountries,optionsText: function(item) {return item.countryName + ' (pop: ' + item.countryPopulation + ')'},value: selectedCountry,optionsCaption: 'Choose...'">
</select>

<select size=3 data-bind="options: myItems,optionsText: 'name',optionsValue: 'id',optionsAfterRender: setOptionDisable">
</select><script type="text/javascript">var vm = {myItems: [{ name: 'Item 1', id: 1, disable: ko.observable(false)},{ name: 'Item 3', id: 3, disable: ko.observable(true)},{ name: 'Item 4', id: 4, disable: ko.observable(false)}],setOptionDisable: function(option, item) {ko.applyBindingsToNode(option, {disable: item.disable}, item);}};ko.applyBindings(vm);
</script>