Knockout js Select Binding

Learn knockout js

by erick

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<select data-bind="options: values1, optionsCaption: 'Choose..', value: selected[0]"></select>
<select data-bind="options: values2, optionsCaption: 'Choose..', value: selected[1]"></select>
<select data-bind="options: values3, optionsCaption: 'Choose..', value: selected[2]"></select>

JavaScript

var viewModel = function(data) {
   var self = this;
   this.values = ko.observableArray([ "option 1", "option 2", "option 3"]);
   this.selected = [
       new ko.observable(),
       new ko.observable(),
       new ko.observable()
   ]
   
   this.remaining = function (current) {
       console.log("opo isine", current)
       var selected = ko.toJS(self.selected),
           currentValue = ko.utils.unwrapObservable(current);
       var result = ko.utils.arrayFilter(self.values(), function (option) {
           return option == currentValue || selected.indexOf(option) === -1;
       });
       return result;            
   };
     
   this.values1 = ko.computed(function () {
      return self.remaining(self.selected[0]);
   });
   this.values2 = ko.computed(function () {
      return self.remaining(self.selected[1]);
   });
   this.values3 = ko.computed(function () {
      return self.remaining(self.selected[2]);
   });
};

ko.applyBindings(new viewModel());