JSFiddle - React, Tailwind, and code Playground
HTML
<select class="form-control"
data-bind="selectedOptions: SelectedCities,
options: $root.Cities,
optionsText: 'CityName',
optionsValue: 'CityId',
valueUpdate: 'change'"
multiple="true"></select>
<hr />
CSV: <p data-bind="text: SelectedCitiesCsv"></p>
JavaScript
var ViewModel = function() {
var self = this;
self.Cities = [
{CityId: 1, CityName: "City 1"},
{CityId: 2, CityName: "City 2"},
{CityId: 3, CityName: "City 3"},
{CityId: 4, CityName: "City 4"}
];
self.SelectedCities = ko.observableArray([]);
self.SelectedCitiesCsv = ko.computed(function(){
return self.SelectedCities().join(",");
});
};
ko.applyBindings(new ViewModel());