knockout.js - Knockout js Binding to drop down list -

i learning knockout js yesterday only. seeming new me. somehow managed it. let saving country list, state list database using knock out js. have done first task saving country list. problem started in second page saving state list. here binding countries drop down list in state.aspx page, after dont understand how proceed.

let me give code:

  <div id="state_container">     <table border="0" cellpadding="0" cellspacing="0" class="form"  data-bind="with:statemodel"          width="300px">         <tr>             <td>                 <span>statename&nbsp; </span>                  &nbsp;<input type="text" name="statename" data-bind="value:statename"  />             </td>         </tr>         <tr>             <td>                 <span>short name</span>                   <input type="text" name="shortname" data-bind="value:shortname" />             </td>         </tr>         <tr>             <td>                 <span>country&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp;                   <select   data-bind="options: countrieslist,optionstext: 'countryname',optionsvalue:'countryid',value:selectedchoice,optionscaption: 'select country..'" style="width: 148px">                 </select>             </td>         </tr>         <tr>             <td>                 <input type="button" name="btnsubmit" value="add" data-bind="click:submit" />                 <input type="button" name="btnreset" value="reset" />                 <span data-bind="text: selectedchoice" > </span>             </td>         </tr>     </table> </div> 

my script:

<script type="text/javascript">       (function () {             var countrymodel = {                countrieslist: ko.observablearray([])            };             var countryviewmodel = function () {               var self = this;               self.countrymodel = countrymodel;               // self.validatecountry = ko.validation.group(self.countrymodel, { deep: true });               self.countrieslist = ko.observablearray([]);               self.selectedchoice = ko.observable();            }            var statemodel = {               stateid: ko.observable(0),               statename: ko.observable('').extend({ required: true }),               shortname: ko.observable('').extend({ required: true }),               isactive: ko.observable(true),               countryid: ko.observable()           };            var stateviewmodel = function () {               var self = this;               self.statemodel = statemodel;               self.validatestate = ko.validation.group(self.countrymodel, { deep: true });               self.stateslist = ko.observablearray([]);               //handle submit               self.submit = function () {                   if (self.validatecountry().length == 0) {                       if (self.statemodel.stateid() > 0) {                           self.updatecountry();                       } else {                           self.addstate();                       }                       self.reset();                   } else {                       self.validatecountry.showallmessages(true);                   }               }                self.addstate = function () {                   var args = json.stringify({ argbo: jquery.parsejson(ko.tojson(self.statemodel)) });                   ajax.post("addstate.aspx/addstate", args, false).success(function (data) {                       if (data.d[0] > 0) {                           logger.success(data.d[1]);                       }                       else {                           logger.error(data.d[1]);                       }                    });               }                self.reset = function () {                   var md = self.countrymodel;                   md.countryname('');                   md.shortname('');                   md.isactive(true);                   md.countryid(0);                   self.validatecountry.showallmessages(false);               }           };            var vm = new countryviewmodel();           ajax.get("addcountry.aspx/getcountries", { isactive: true }, false).success(function (data) {               vm.countrieslist(data.d);           });            ko.applybindings(vm, document.getelementbyid("state_container"));        })();        </script> 

the problem getting stateviewmodel not getting hit in debug mode, , hence every time ending statemodel not defined

please body me!! give references know might me in understanding

you binding countryviewmodel() state_container.

<div id="state_container">     <table border="0" cellpadding="0" cellspacing="0" class="form"  data-bind="with:statemodel"> 

here, inside state_container binding-context bound countryviewmodel has no statemodel defined, hence statemodel not defined

you have defined stateviewmodel in javascript, don't assign anywhere, nor bind anywhere.
here can read on binding context.