Select value binding in KO
Sample of binding a select options value to a ko.observable
HTML
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<select data-bind="options: produceList, optionsText:'productName', optionsCaption: 'Choose...', value: selectedItem"></select>
<hr/>
<span data-bind="text: selectedItem()"></span>
JavaScript
var myProduceModel = function(){
var self = this;
self.produceList = ko.observableArray([
{productName: "Apples", productCode: "#FF0000"},
{productName: "Oranges", productCode: "#FF9200"},
{productName: "Grapes", productCode: "#652C90"},
{productName: "Figs", productCode: "#67070D"}
]);
self.selectedItem = ko.observable();
self.selectedField = ko.observable();
self.selectedItem.subscribe(function(item){
self.selectedField(item.productName);
return item.productCode;
});
};
ko.applyBindings(new myProduceModel());