JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
<select data-bind="options: uniqueCountries,
optionsText: function(item) {
return item.countryName + ' (pop: ' + item.countryPopulation + ')'
},
value: selectedCountry,
optionsCaption: 'Choose...'"></select>
JavaScript
var Country = function (name, population) {
this.countryName = name;
this.countryPopulation = population;
};
var AppViewModel = function () {
var self = this;
self.availableCountries = ko.observableArray([
new Country("UK", 65000000),
new Country("USA", 320000000),
new Country("Sweden", 29000000),
new Country("Sweden", 24000000)]);
self.uniqueCountries = ko.dependentObservable(function () {
var seen = [];
return self.availableCountries().filter(function (n) {
return seen.indexOf(n.countryName+'-'+n.countryPopulation) == -1 && seen.push(n.countryName+'-'+n.countryPopulation);
});
}, self);
self.selectedCountry = ko.observable();
};
ko.applyBindings(new AppViewModel());