Populating a dropdown with an observable array in knockout.js

Question

I have X number of dropdowns that I dynamically created using Knockout, and now I want to preselect one option per dropdown. Coincidentally, I have an observable array with X entries that correspond to the options I want selected. How can I use this array to select my options?

Example viewmodel:

function AppViewModel() {
    var self = this;
    self.array = ko.observable(["Dog","Cat"]);
}

In this example, I have two dropdowns, both of which have a "Dog" and "Cat" option. I want to select "Dog" for the first dropdown and "Cat" for the second.

Here's my HTML:

<div data-bind="foreach: array">
      <label>
        <select data-bind="options: array"></select>
      </label>
</div>

If your requirements are really that simple you can use the $index() inside your foreach to access the selected values: jsfiddle.net/pvF43 — nemesv
– nemesv, Commented Jun 25, 2014 at 20:28
@nemesv this is exactly what I needed. $index() is the way to go when you need to populate based on indices of an array. Thank you! — user3757174
– user3757174, Commented Jun 26, 2014 at 14:33

Matt Burland · Accepted Answer · 2014-06-25 19:49:01Z

2

As per the docs you need a value binding for your selected binding.

function AppViewModel() {
    var self = this;
    self.array = ko.observable(["Dog","Cat"]);
    self.selected = ko.observable(self.array()[0]);
}

And then:

<select data-bind="options: array, value: selected "></select>

Example: http://jsfiddle.net/H6DL5/

If you've got many of these dropdowns, then you can use an array of subVMs for your result. Something like this:

function AppViewModel() {
    var self = this;
    self.array = ko.observable(["Dog", "Cat", "Weasel"]);
    self.dropDowns = ko.observableArray([
    new SubVM("Dog"),
    new SubVM("Cat")]);
}

function SubVM(selected) {
    var self = this;
    self.selected = ko.observable(selected);
}

Which you can bind like this:

<div data-bind="foreach:dropDowns">
    <select data-bind="options: $parent.array, value: selected "></select>
</div>

Now you can add as many drop-downs as you need by adding them to the dropDowns array in your parent VM.

Example: http://jsfiddle.net/H6DL5/1/

If you need different options in each drop-down, just add an array for the available options to your SubVM and bind for options that instead of the parent list.

edited Jun 25, 2014 at 19:49

answered Jun 25, 2014 at 19:32

Matt Burland

45.3k18 gold badges110 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3757174 Over a year ago

I have the same number of dropdowns as I do elements in the array, so I don't want to just hardcode a selected value in.

Matt Burland Over a year ago

@user3757174: You are going to need to put the actual selected values somewhere aren't you? You could create an array of values, but better might be to create a sub VM that has the selected value.

user3757174 Over a year ago

Definitely, but I won't always have 2 dropdowns—there could be many more, depending on the data passed in. Maybe I should dynamically create observables?

Matt Burland Over a year ago

@user3757174: I'd use an array of subVMs in your ViewModel, but I'm not entirely clear where you are getting the list of options from and where you are getting the list of selected items from? Is the list of available options supposed to be the same for all drop-downs?

user3757174 Over a year ago

The list of available options is the same for all drop-downs, but the list of options I want to select is something that I computed given some input from the user.

Collectives™ on Stack Overflow

Populating a dropdown with an observable array in knockout.js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related