Edit in JSFiddle

var country = function(code, name) {
    var self = this;
    
    this.code = code;
    this.name = name;
    
    //must implement a custom Equals function
    this.Equals = function(country) {
            return self.code === country.code;
    };
};

var DualSelectBox = function() {
    var self = this;

    this.rightItems = ko.observableArray();
    this.leftItems = ko.observableArray();
    this.rightItemsFilterd = ko.computed(function() {
        var leftItems = self.leftItems;
        var rightItems = self.rightItems;

        for (var leftItemIndex in leftItems()) {
            rightItems.remove(function(rightItem) {
                var leftItem = leftItems()[leftItemIndex];
                return leftItem.Equals(rightItem);
            });
        }

        return rightItems();
    });

    this.leftSelectedItems = ko.observableArray();
    this.rightSelectedItems = ko.observableArray();

    var unselect = function () {
        self.rightSelectedItems.removeAll();
        self.leftSelectedItems.removeAll();
    };
    
    this.initialize = function(data) {
        unselect();
        
        if (data === undefined) throw 'no default data passed';

        initialLeftItems = data.leftItems.slice();
        self.leftItems(data.leftItems.slice());
        self.rightItems(data.rightItems.slice());

        var db = jQuery('#dualselect').find('.arrow'); //get arrows of dual select
        var sel1 = jQuery('#dualselect select:first'); //get first select element
        var sel2 = jQuery('#dualselect select:last'); //get second select element
        if (db.length === 0) throw 'Arrow buttons for dual select were not found';
        if (sel1.length === 0) throw 'First select of dual select was not found';
        if (sel2.length === 0) throw 'Second select of dual select was not found';

        db.click(function() {
            var t = (jQuery(this).hasClass('ds_prev')) ? 0 : 1; // 0 if arrow prev otherwise arrow next
            if (t) {
                self.rightArrowClick();
            } else {
                self.leftArrowClick();
            }
        });
    };

    this.leftArrowClick = function() {
        for (var rightSelectedItemIndex in self.rightSelectedItems()) {
            var rightSelectedItem = self.rightSelectedItems()[rightSelectedItemIndex];
            self.rightItems.remove(rightSelectedItem);
            self.leftItems.push(rightSelectedItem);
        }
        
        unselect();
    };

    this.rightArrowClick = function() {
        for (var leftSelectedItemIndex in self.leftSelectedItems()) {
            var leftSelectedItem = self.leftSelectedItems()[leftSelectedItemIndex];
            self.leftItems.remove(leftSelectedItem);
            self.rightItems.push(leftSelectedItem);
        }
        
        unselect();
    };
}

var topTen2012OlympicMedalists = [
    new country('USA', 'United States'), new country('CHN', 'China'), new country('GBR', 'Great Britain'), new country('RUS', 'Russia'), new country('KOR', 'South Korea'), new country('GER', 'Germany'), new country('FRA', 'France'), new country('ITA', 'Italy'), new country('HUN', 'Hungary'), new country('AUS', 'Austria')];

var myViewModel = new DualSelectBox();

myViewModel.initialize({
    leftItems: topTen2012OlympicMedalists.slice(0,2),
    rightItems: topTen2012OlympicMedalists
});

ko.applyBindings(myViewModel);

jQuery('button').click(function() {
    alert(ko.toJSON(myViewModel.leftItems()));
});
<h3>Top 10 2012 Olympic Medalists</h3>

<div id="dualselect">
    <select multiple="multiple" size="10" data-bind="options:leftItems, selectedOptions: leftSelectedItems, optionsText: 'name'" style="width:40%"> </select>

    <span class="arrow ds_prev"><<</span>
        &nbsp;
    <span class="arrow ds_next">>></span>

    <select multiple="multiple" size="10" data-bind="options: rightItemsFilterd, selectedOptions: rightSelectedItems, optionsText: 'name'" style="width:40%"> </select> 
        </div>
        
        <button>Save Selected</button>

              

External resources loaded into this fiddle: