CODEWITHSUNDEEP
javascriptknockout.js
Vetri
Vetri

Reputation: 1

Preselect the dropdown using knockout is not working

On page load i am getting drpDownValue as null.

I am able to update drpDownValue as 1 in computed function. But in UI dropdown is not selected by default.

I need to select the Enable option by default in dropdown. Please help me to fix this issue

 <select data-bind="options: Options, optionsCaption: ' ', optionsText: 'Value', optionsValue: 'Key', value: drpDownValue}"></select>

var EditModel = function () {
  var drpDownValue = ko.observable(0);
  var Options = ko.observableArray([{ Key: 1, Value: "Enable" }]);
  var Test= ko.computed(function() {
      drpDownValue(1);
  });

return {
  drpDownValue: drpDownValue,
  Options: Options,
  Test: Test
};
}

Upvotes: 0

Views: 126

Answers (1)

James Thorpe
James Thorpe

Reputation: 32192

You're giving knockout a list with one item in, and telling it that it's value is 1. You're then setting the value of the select, via drpDownValue to a default of 0. Since that doesn't exist as a value in your list of items, nothing is selected.

If you want to use 1 as the default, just update your observable to default to that instead of 0:

var drpDownValue = ko.observable(1);

Note that this doesn't really tally with the fact that you're also setting the optionsCaption, which is meant for when you don't want to select one by default and instead want to display something like "Please choose" instead.

Upvotes: 1

Related Questions