CODEWITHSUNDEEP
javascriptknockout.js
rodiwa
rodiwa

Reputation: 1770

Using KnockoutJS, how to bind data to 2 different <select> tags from the same view model

I have 2 select tags on my view.html like so

<select id="first" data-bind="options: firstDropdownOptions, optionsText: 'title', value: value"></select>
<select id="second" data-bind="options: secondDropdownOptions, optionsText: 'title', value: value"></select>

And something like this in my viewmodel.js

var firstDropdownOptions = ko.observableArray([
        { value: -1, title: 'Select Type' },
        { value: 111, title: 'Option 1' },
        { value: 222, title: 'Option 2' },
        { value: 333, title: 'Option 3' }
    ]);

var secondDropdownOptions = ko.observableArray([
        { value: -1, title: 'Select Type' },
        { value: 1, title: 'Option New 1' },
        { value: 2, title: 'Option New 2' },
        { value: 3, title: 'Option New 3' }
    ]);

I am unable to bind data to both my <select> tags. Only the first <select> tag works properly. Also, if I move the #second <select> tag before the #first <select>, then the #second shows correct data, but not the #first <select>.

How do I bind data to both my <select> tags?

Upvotes: 0

Views: 96

Answers (2)

rodiwa
rodiwa

Reputation: 1770

As an alternate to dotnetom's answer, this worked for me too.

Instead of using different properties for storing the selected values in my viewmodel.js, I used firstDropdownOptions().value and firstDropdownOptions().value in view.html instead.

view.html

<select data-bind="options: firstDropdownOptions, optionsText: 'title', value: firstDropdownOptions().value"></select>
<select data-bind="options: secondDropdownOptions, optionsText: 'title', value: secondDropdownOptions().value"></select>

viewmodel.js

var vm = {
firstDropdownOptions: ko.observableArray([
        { value: -1, title: 'Select Type' },
        { value: 111, title: 'Option 1' },
        { value: 222, title: 'Option 2' },
        { value: 333, title: 'Option 3' }
    ]),
    secondDropdownOptions: ko.observableArray([
        { value: -1, title: 'Select Type' },
        { value: 1, title: 'Option New 1' },
        { value: 2, title: 'Option New 2' },
        { value: 3, title: 'Option New 3' }
    ])
};
ko.applyBindings(vm);

Here's the fiddle.

Upvotes: 0

krivtom
krivtom

Reputation: 24916

In both of your bindings you are using value: value. This means that values of both select elements are bound to the same model property, called value. You are using different arrays with different objects, so single value cannot function correctly. Try using two different properties for storing values, for example:

var vm = {
    firstDropdownOptions: ko.observableArray([
        { value: -1, title: 'Select Type' },
        { value: 111, title: 'Option 1' },
        { value: 222, title: 'Option 2' },
        { value: 333, title: 'Option 3' }
    ]),
    secondDropdownOptions: ko.observableArray([
        { value: -1, title: 'Select Type' },
        { value: 1, title: 'Option New 1' },
        { value: 2, title: 'Option New 2' },
        { value: 3, title: 'Option New 3' }
    ]),
    // property for storing selected value of firstDropdownOptions:
    selectedFirstOptionValue: ko.observable(''),   
    // property for storing selected value of secondDropdownOptions:
    selectedSecondOptionValue: ko.observable('')
};
ko.applyBindings(vm);

And in your HTML bind properties selectedFirstOptionValue and selectedSecondOptionValue respectively (properties will contain objects from your arrays):

<select id="first" data-bind="options: firstDropdownOptions, optionsText: 'title', value: selectedFirstOptionValue"></select>
<select id="second" data-bind="options: secondDropdownOptions, optionsText: 'title', value: selectedSecondOptionValue"></select>

Here is a working jsFiddle

Upvotes: 2

Related Questions