Knockout select options binding with array

Question

I am trying to bind a select options with values from my array without success. I have tried to change how i work with the array my changing to from an observable to observableArray but it wont take the values.

This is my current attempt.

<select name="status"
data-bind="options: statuses,
  optionsValue: 'key',
  optionsText: 'value',
  value: status "></select>

Knockout:

$statuses = {
 1: 'Open',
 2: 'Closed',
 3: 'On hold'
}

self.statuses = ko.observable($statuses);
self.status = ko.observable(null);

ZeroBased_IX ZeroBased_IX · Accepted Answer · 2018-07-28T10:04:45

You're passing a dictionary not an array.

It should be something like:

$statuses = [
    'Open',
    'Closed',
    'On hold'
]

self.statuses = ko.observableArray($statuses)

With the following HTML

<select name="status" data-bind="options: statuses, value: status"></select>

If you want the key to be the value change $statuses to be:

$statuses = [
    {key: 'Open', value: 1},
    {key: 'Closed', value: 2},
    {key: 'On hold', value: 3}
]

And keep the HTML binding as you have it with the optionsValue and optionsText.

Knockout select options binding with array

1 Answers