级联选择框与骨干

Question

我有两个选择框（县和城市）。当我改变国家时，我想更新与国家相对应的城市。

模板：

<select id="countries">
  <% _(countries).each(function(country) { %>
    <option value="<%= country.id %>">`enter code here`<%= country.name %></option>
  <% }); %>
</select>
  <input id="countryId" name="countryId" type="hidden" value="<%= countryId %>" />
<select id="cities">
  <% _(cities[countryId]).each(function(city) { %>
    <option value="<%= city.id %>"><%= city.name %></option> 
  <% }); %>
</select>

查看

 events: {          
    'change #countries': 'setCountry',
 },
 setCountry: function(element) {
   this.model.set('countryId', element.target.value);
   this.$el.find( "#countryId" ).val( this.model.get( "countryId" ) );     

   //this.render();             
 },                                           

如果我在setCountry中调用render（），它会更新城市，但它会刷新其他表单元素，如验证消息。

如何更新代码，当我更改国家/地区时，只刷新城市选择框？