jquery - issue with knockout binding and mvc4?dropdown values are not submitting to action method using knockout? -

requirement:

my requirement have countries ,states , cities data databse , bind dropdown (cascading drop down) using knocout in form.. , add firstname , lastname form.. have submit dropdown values along firstname , lastname action method.. able submit firstname , lastname ... dropdown values not binding action method.. think mistake in select tags or anywhere.. friends please me done mistaken...

---

dropdown values not submitting action method using knockout?

---

    $(document).ready(function () {     function viewmodel() {         var self = this;          self.employee = {};         self.employee.firstname = ko.observable();         self.employee.lastname = ko.observable();         self.employee.country = ko.observable();;         self.employee.state = ko.observable();;         self.employee.city = ko.observable();;          //countries         self.fn = function () {};         self.fn.countrycollection= ko.observablearray();         self.fn.statecollection= ko.observablearray();         self.fn.citycollection = ko.observablearray();              $("#country").change(function () {             var countryid = $("#country").val();             $.ajax({                 type: "get",                 url: "http://localhost:62830/api/location/getstates/" + countryid,                 contenttype: "application/json; charset=utf-8",                 datatype: "json",                 success: function (response) {                     if (response != "") {                         $(response).each(function (index, element) {                             self.fn.statecollection.push(element);                         });                         //ko.applybindings(viewmodel);                     }                 }             });         });          $("#state").change(function () {             var stateid = $("#state").val();             $.ajax({                 type: "get",                 url: "http://localhost:62830/api/location/getcities/" + stateid,                 contenttype: "application/json; charset=utf-8",                 datatype: "json",                 success: function (response) {                     if (response != "") {                         $(response).each(function (index, element) {                             self.fn.citycollection.push(element);                         });                         //ko.applybindings(viewmodel);                     }                 }             });         });           function fetchcountries() {             $.ajax({                 type: "get",                 url: "http://localhost:62830/api/location",                 contenttype: "application/json; charset=utf-8",                 datatype: "json",                 success: function (response) {                     if (response != "") {                         $(response).each(function (index, element) {                             self.fn.countrycollection.push(element);                         });                     }                 }             });         }         fetchcountries();         var empdata = {              firstname: self.employee.firstname,             lastname: self.employee.lastname,             country: self.employee.country,             state: self.employee.state,             city: self.employee.city         };         alert(empdata)          self.submit = function () {              $('#btnsubmit').live("click", function (e) {                  $.ajax({                     url: "http://localhost:62830/home/submit/",                     async: true,                     cache: false,                     type: 'post',                     data: ko.tojson(empdata),                     contenttype: "application/json; charset=utf-8",                     success: function (result) {                      }                 });             });         }     }      ko.applybindings(new viewmodel());    });      </script>     <h2>cascading dropdown using knockout</h2>    firstname:    <input type="text" id="txtfirstname" name="txtfirstname" data-        bind="value:employee.firstname" />     <br />     lastname:    <input type="text" id="txtlastname" name="txtfirstname" data-     bind="value:employee.lastname" />     <br />    country name:     <select data-bind="options: fn.countrycollection, optionscaption: 'choose      country...',   optionsvalue: function (item) { return item.countryid; },   optionstext: function (item) { return item.countryname; }, value: employee.country,   valueupdate: 'change'"    id="country" name="country">    </select>    <br />    state name:   <select data-bind="options: fn.statecollection, optionscaption: 'choose state...',   optionsvalue: function (item) { return item.stateid; },     optionstext: function (item) { return item.statename; },  value: employee.state,     valueupdate: 'change'"     id="state" name="state">   </select>    <br />    city name:  <select data-bind="options: fn.citycollection, optionscaption: 'choose city...',   optionsvalue: function (item) { return item.cityid; },    optionstext: function (item) { return item.cityname; }, value: employee.city,  valueupdate: 'change'"  id="city" name="city"> </select>  <input type="button" data-bind="click: submit" value="submit" id="btnsubmit" />        controller class   public actionresult submit(employee dt)     {         string fname = dt.firstname;         string lname = dt.lastname;         string cntry = dt.country;         string state = dt.state;         string city = dt.city;         return view();     } 

try this.

var empdata= {         firstname: self.employee.firstname(),         lastname: self.employee.lastname(),         country: self.employee.country(),         state: self.employee.state(),         city: self.employee.city()     }; 

and use ko.tojs sending data

data: ko.tojs(empdata),