Question

I have a viewmodel that looks like this:

var teamViewModel = {
        teams: ko.observableArray([]),
        clearTeams: function(){
            this.teams.removeAll();
        },
        addTeam: function (id, name, isChecked) {
            t = new team(id, name, isChecked);
            this.teams.push(t);
        }
    };

and i am getting all teams like this:

function GetAvailableTeams() {

        var jqxhr =
        $.getJSON('http://localhose/Service.svc/GetTeamsAll',
          function (data) {
                teamViewModel.clearTeams();
                $.each(data.GetTeamsAllResult, 
                    function (key, val) {
                        teamViewModel.addTeam(val.TeamId, val.TeamName, true);
                    });
                ko.applyBindings(teamViewModel, document.getElementById("teamNameLabel"));
          })
    }

How do I data-bind a select to have the TeamName as the name and TeamId as the Value.

Here is my attempt but its saying id is not recognized:

<select id="teamNameLabel" onclick="nextfunction()" date-theme="f" data-bind="options: teams, optionsText: 'name', value: 'id'"></select>

I also want the id returned onchange()

Answer 1

You should use optionsValue binding instead of value if you want to store just id:

<select id="teamNameLabel" data-bind="options: teams, optionsText: 'name', optionsValue: 'id'"></select>

When you are using value binding you shouldn’t wrap property name with quotes. And in this case property will store whole team object.