Update form elements based on user input

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://rawgithub.com/powmedia/backbone-forms/master/distribution/backbone-forms.js"></script>
<script src="https://rawgithub.com/powmedia/backbone-forms/master/distribution/editors/list.js"></script>
<script src="https://rawgithub.com/powmedia/backbone-forms/master/distribution/adapters/backbone.bootstrap-modal.js"></script>
<script src="https://rawgithub.com/powmedia/backbone-forms/master/distribution/templates/bootstrap.js"></script>

CSS

/* Date */

.bbf-date .bbf-date {
  width: 4em
}

.bbf-date .bbf-month {
  width: 9em;
}

.bbf-date .bbf-year {
  width: 5em;
}

/* DateTime */

.bbf-datetime select {
  width: 4em;
}

/* List */

.bbf-list .bbf-add {
  margin-top: -10px
}

.bbf-list li {
  margin-bottom: 5px
}

.bbf-list .bbf-del {
  margin-left: 4px
}

/* List.Modal */

.bbf-list-modal {
  cursor: pointer;
  border: 1px solid #ccc;
  width: 208px;
  border-radius: 3px;
  padding: 4px;
  color: #555;
}

JavaScript

$(function() {
  var cities = {
    'UK': ['London', 'Manchester', 'Brighton', 'Bristol'],
    'USA': ['Washington DC', 'Los Angeles', 'Austin', 'New York']
  };

  //The form
  var form = new Backbone.Form({
    schema: {
      country: {
        type: 'Select',
        options: ['UK', 'USA']
      },
      city: {
        type: 'Select',
        options: cities.UK
      }
    }
  }).render();

  form.on('country:change', function(form, countryEditor) {
    var country = countryEditor.getValue(),
      newOptions = cities[country];

    form.fields.city.editor.setOptions(newOptions);
  });

  //Add it to the page
  $('body').append(form.el);
});