CODEWITHSUNDEEP
knockout.jsknockout-2.0knockout-3.0
Arnab
Arnab

Reputation: 2354

Preselecting a value for dropdownlist

I have my javascript code as below:

var myobservablearray = ko.observableArray(["toys", "books"]);
var myselectedobservable = ko.observable();

var myotherObservableArray = ko.observableArray([{
  "toys": [{
    "name": "Bungle",
    "isselected": true
  }, {
    "name": "George"
  }, {
    "name": "Zippy"
  }]
}, {
  "books": [{
    "name": "Book1",
    "isselected": true
  }, {
    "name": "Book2"
  }, {
    "name": "Book3"
  }]
}]);
var myselectedotherobservable = ko.observable();

I wish to create a cascading drop downlist

My first dropdowncode is as below..

<select data-bind="options: $root.myobservablearray,  value: myselectedobservable"></select>

How do I create a cascading dropdown such that the preselected value of the selected option in that drop down is the value which has isselected=true.

Any help is sincerely appreciated

Thanks

Upvotes: 0

Views: 86

Answers (1)

Roy J
Roy J

Reputation: 43899

You've got several things going on here. You've got a structure that maps out the values for each of toys and books. You will use that to get the options for the dependent select, but it doesn't need to be an array itself.

The main select is straightforward, with options and a value. The dependent select will get its options from a computed observable which will also set the value to the entry that has isselected set.

If you also want the selected value to update which item has isselected set, there's probably some more code rearranging to be done.

Update After the dependent list is updated, Knockout needs a little time to set up the select. By default, it will set the first item in the list to be selected. To make sure our default is selected after the list is setup, I added a setTimeout (and separated the default selection from the list computed).

vm = (function() {
  var myobservablearray = ko.observableArray(["toys", "books"]),
    value1 = ko.observable(),
    value2 = ko.observable();

  var dependentOptions = {
    "toys": [{
      "name": "Bungle"
    }, {
      "name": "George",
      "isselected": true
    }, {
      "name": "Zippy"
    }],
    "books": [{
      "name": "Book1",
      "isselected": true
    }, {
      "name": "Book2"
    }, {
      "name": "Book3"
    }]
  };

  var options2 = ko.computed(function() {
    if (value1() === undefined) return;
    return dependentOptions[value1()];
  });

  options2.subscribe(function(newValue) {
    setTimeout(function() {
      for (var i = 0; i < newValue.length; ++i) {
        var item = newValue[i];
        if (item.isselected) {
          console.debug("Found selected");
          value2(item);
        }
      }
    }, 0);
  });

  return {
    options1: myobservablearray,
    options2: options2,
    value1: value1,
    value2: value2
  };
}());

ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: options1, value: value1"></select>
<select data-bind="options: options2, optionsText: 'name', value: value2"></select>

Upvotes: 1

Related Questions