Knockout List Items Moving

by Pratik Bhoir

HTML

<div data-bind="text: Title"></div>

<h2>Countries</h2>

<select data-bind="options: boxA, selectedOptions: boxAChosen" size="5" multiple="true"></select>
<button data-bind="click: moveChosenToBoxB">>></button>
<button data-bind="click: moveChosenToBoxA"><<</button>
<select data-bind="options: boxB, selectedOptions: boxBChosen" size="5" multiple="true"></select>
<div data-bind="foreach: availableCountries">
    <div data-bind="text: $data"></div>
</div>

JavaScript

var viewModel = function () {
    var self = this;
    this.Title = "This is the Title";
    
    this.boxA = ko.observableArray(['A', 'B', 'C', 'D']);
    this.boxAChosen = ko.observableArray();
    this.boxB = ko.observableArray();
    this.boxBChosen = ko.observableArray();
    
    this.moveChosenToBoxB = function () {
        self.boxAChosen().forEach(function(item) {
            self.boxB.push(item);
        });
        self.boxA.removeAll(self.boxAChosen());
        self.boxAChosen.removeAll();
    }

    this.moveChosenToBoxA = function () {
        self.boxBChosen().forEach(function(item) {
            self.boxA.push(item);
        });
        self.boxB.removeAll(self.boxBChosen());
        self.boxBChosen.removeAll();
    }
}

var ViewModel = new viewModel();
ko.applyBindings(ViewModel);