javascript - Cascading Select Boxes with Backbone.js -

i'm found useful link http://blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js/

how populate these restful response continent select tag:

{"_count":6,"data":[{"id":"6","continent":"north america","code":"na","sort_order":"6","published":"1","date_created":"2014-02-02 13:16:54","createdbypk":"1","date_modified":"2014-02-02 21:17:10","modifiedbypk":"1"},{"id":"1","continent":"asia","code":"as","sort_order":"1","published":"1","date_created":"2014-02-02 12:31:42","createdbypk":"1","date_modified":"2014-02-02 21:16:31","modifiedbypk":"1"}]} 

here js code:

$(function () {      var continent = backbone.model.extend();      var country = backbone.model.extend();      var continents = backbone.collection.extend({          url: base_url + 'api/continents',          model: continent      });      var countrys = backbone.collection.extend({          model: country      });      var locationview = backbone.view.extend({          tagname: "option",          initialize: function () {              _.bindall(this, 'render');          },          render: function () {              console.log(this.model);              $(this.el).attr('value', this.model.get('id')).html(this.model.get('continent'));              //attr('value', this.model.get('id')).              //$(this.el).html(this.model.get('continent'));              return this;          }      });      var locationsview = backbone.view.extend({          events: {              "change": "changeselected"          },          initialize: function () {              _.bindall(this, 'addone', 'addall');              this.collection.bind('reset', this.addall);          },          addone: function (continent) {              $(this.el).append(new locationview({                  model: continent              }).render().el);          },          addall: function () {              this.collection.each(this.addone);          },          changeselected: function () {              this.setselectedid($(this.el).val());          }      });      var continentsview = locationsview.extend({          setselectedid: function (countryid) {              this.countrysview.collection.url = base_url + "api/country/id/" + countryid;              this.countrysview.collection.fetch();              $(this.countrysview.el).attr('disabled', false);          }      });      var countrysview = locationsview.extend({          setselectedid: function (countryid) {              // nothing -          }      });      var continents = new continents();      var continentsview = new continentsview({          el: $("#continent"),          collection: continents      });      var countrysview = new countrysview({          el: $("#country"),          collection: new countrys()      });      new locationsview({          el: $("#continent"),          collection: continents      });      new locationsview({          el: $("#country"),          collection: new countrys()      });      continents.fetch();  }); 

here form

<form>  continent:<select id="continent"><option value=''>select</option></select>  country:<select id="country" disabled="disabled"><option value=''>select</option></select>   company:<select id="company" disabled="disabled"><option value=''>select</option></select> </form>