CODEWITHSUNDEEP
javascriptknockout.js
Swamy
Swamy

Reputation: 463

How to update the values of Observable Array through Select element

I have a observable Array and I display that in a select element, for example if I have 4 elements in the array, then I will have 4 Select Element.

When I change the items in the Select list the observable array seems to be unchanged.

Please help me on how to update the observable array.

The jsfiddle for the same is here

HTML Code

    <div>
    <div>
        <table>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
            <tbody data-bind="foreach: players">
                <tr>
                    <td data-bind="text: name"></td>
                    <td data-bind="text: age"></td>
                    <td data-bind="text: country"></td>
                    <td data-bind="text: trophies"></td>
                    <td>
                        <button data-bind="click: $root.editPlayers">Edit</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div data-bind="with: editPlayer">
         <h3>Edit</h3>
Name:
        <input type="text" data-bind="value: name" />
        <br/>Age:
        <input type="text" data-bind="value: age" />
        <br/>Country:
        <input type="text" data-bind="value: country" />
        <span data-bind="foreach: trophies">
            <br/>Tropies:
            <select data-bind="options: $root.trophiesList, value:$data, optionsCaption:'Choose..'"></select>    
        </span>

    </div>
</div>

JavaScript Code

    var player = function (name, age, country, trophyArray) {
    this.name = ko.observable(name);
    this.age = ko.observable(age);
    this.country = ko.observable(country);
    this.trophies = ko.observableArray(trophyArray);
};

var playerModel = function () {
    var self = this;
    self.players = [
        new player('Roger', 32, 'swiss', ['AO','FO','WB','US']),
        new player('Murray', 28, 'Scott', ['WB','US'])];

    self.editPlayer = ko.observable();
    self.trophiesList = ['AO','US','FO', 'WB'];

    self.editPlayers = function (player) {
        self.editPlayer(player);
    }

}

ko.applyBindings(new playerModel());

Upvotes: 0

Views: 97

Answers (2)

Gabe
Gabe

Reputation: 462

Hi I have created an updated fiddle for you

self.players = [
    new player('Roger', 32, 'swiss', [{key: ko.observable('AO')},{key:ko.observable('FO')},{key:ko.observable('WB')},{key: ko.observable('US')}]),
    new player('Roger', 32, 'swiss', [{key: ko.observable('AO')},{key:ko.observable('FO')},{key:ko.observable('WB')},{key: ko.observable('US')}])];

http://jsfiddle.net/M8m8R/4/

Hope this helps

Upvotes: 0

DaveB
DaveB

Reputation: 9530

Remove the following markup:

<span data-bind="foreach: trophies"> and the closing </span> tag.

Then use the selectedOptions binding to manage the trophies array:

    <br/>Tropies:
    <select data-bind="options: $root.trophiesList, selectedOptions:trophies, optionsCaption:'Choose..'" multiple="true" size="10"></select>

The user can then select/deselect multiple trophies.

Upvotes: 1

Related Questions