Showing a concatenated string from multiple values of observable array

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

dfperry dfperry · Accepted Answer · 2015-12-24T14:32:03

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>

Showing a concatenated string from multiple values of observable array

1 Answers