asp.net - how to bind selectlist to value using json in javascript -

i'm new web application development , need bind values retrieved json object. tried several ways couldn't able bind values combo box.

<script type="text/javascript">       var viewmodel = {            checkin : ko.observable(),          checkout: ko.observable(),          lunch: ko.observable(),          rest: ko.observable(),          workonproject: ko.observable(),          projects: ko.observablearray()      };   this.getprojects = function () {     $.ajax({         type: "post",         url: 'timerecord.aspx/returncomplextype',         data: {},         contenttype: "application/json; charset=utf-8",         datatype: "json",         success: function (arg) {               (var = 0; < arg.d.length ; i++) {                 var value = arg.d[i].projectcode;                  var option = new option(arg.d[i].projectcode, arg.d[i].projectcode);                 select1.add(option, null);             }          },         error: function (arg) {         }     }); };  ko.applybindings(viewmodel);  </script> 

my html code:

    <tr>          <td class="auto-style1">project code </td>           <td ><select id="select1" data-bind='options: projects' style="width: 312px"></select>                <button data-bind='click: getprojects'>cancel</button>          </td>      </tr> 

my sever side coding :

   [webmethod]         public static object returncomplextype()         {              list<project> projects = new list<project>();             project p = new project();             p.projectid = 1;             p.projectcode = "abc";             p.projectname = "test";             projects.add(p);              project p2 = new project();             p2.projectid = 2;             p2.projectcode = "def";             p2.projectname = "xsd";             projects.add(p2);              return projects;          } 

your select box bound projects observable don't set explicit text/value

<select id="select1" data-bind='options: projects, optionstext: 'projectname', optionsvalue:'projectid', value: selectedprojectid"' style="width: 312px"></select> 

the selectedprojectid observable in model if need save value somewhere.

the other thing you'll want change filling actual observable array instead of select box directly.

<script type="text/javascript">       function viewmodel() {            var self = this;          self.checkin = ko.observable();          self.checkout = ko.observable();          self.lunch = ko.observable();          self.rest = ko.observable();          self.workonproject = ko.observable();          self.projects = ko.observablearray();      };       var vm = new viewmodel();       ko.applybindings(viewmodel);       $.ajax({         type: "post",         url: 'timerecord.aspx/returncomplextype',         data: {},         contenttype: "application/json; charset=utf-8",         datatype: "json",         success: function (arg) {              (var = 0; < arg.d.length ; i++) {                 vm.projects.push(d[i]);             }          },         error: function (arg) {         }     });  </script> 

after things binding right you'll want swap out vm.projects.push() speedier way.

calling .push() when you're filling arrays on initial load triggers ton of notifications can make page crawl.