CODEWITHSUNDEEP
jqueryselectjquery-mobileknockout.js
Mike
Mike

Reputation: 2339

Data-binding to a select

I have a jquery function gets a all teams from a service. How would i data-bind this to a select box?

function GetAvailableTeams() {
        $.support.cors = true; 
        var jqxhr =
        $.getJSON('http://localhost/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"));
          })
         .success(function () {  })
         .error(function () { alert("Encountered error with the service: GetTeams. "); })
         .complete(function () { });
    }

Upvotes: 1

Views: 1773

Answers (1)

Alan Araya
Alan Araya

Reputation: 721

You just have to set up the correct properties of the select element and the api will do it for you.

<select data-bind="options: ReferenceTypes, optionsText: 'TeamName', 
optionsCaption: 'Select...', optionsValue: 'Id', **value:TeamModel**">
</select>

Ex: knockoutjs mapping select data-bind options

http://jsfiddle.net/madcapnmckay/Ba5gx/

Upvotes: 1

Related Questions