Showing a concatenated string from multiple values

Question

I have an observable array as follows..

var myObservableArray = ko.observableArray([
    { name: "Bungle", type: "Unknown" },
    { name: "George", type: "Unknown" },
    { name: "Zippy", type: "Unknown" }
]); 

I wish to fill a select listbox from elements in the observable array such that the option names are concatenated string of 'name' and 'type' like "Bungle-Unknown","George-Unknown",.etc The optionvalues are just 'name'.

Any help is sincerely appreciated.

Thanks

Answer 1

In your binding on the select control, you can use the optionsText binding to build up the caption for your options (see http://knockoutjs.com/documentation/options-binding.html, example 4). You could basically do this (assuming you have another observable called selected to hold the selected option from your dropdown):

<select data-bind="options: myObservableArray,
                   optionsText: function(item) {
                       return item.name + '-' + item.type;
                   },
                   value: selected"></select>