使用knockout.js在选择框项目更改上绑定动态选择框

Question

我使用knockout动态创建了两个下拉列表，在第一个dropdown valuechanged事件中，需要在第二个下拉列表中绑定新的数据源。在第一次下拉更改时，我正在努力绑定第二次下拉列表。

我厌倦了以下代码：

HTML：

 <div data-bind="foreach: dropdown">
     <div>
         <select data-bind="options: cars, value: selectedCar,optionsText: 'name',event: {change: selectionChanged }"></select>
     </div>
     <br />
</div>

JS

  var ds = [];
  ds[0] = [{ countryid: '1', name: 'india' }, { countryid: '2', name: 'USA' }];
  ds[1] = [
    { stateid: '1', name: 'NewDelhi' }, 
    { stateid: '2', name: 'Mumbai' }, 
    { stateid: '3', name: 'California'},
    { stateid: '4', name: 'Washington DC'}      
 ];

var newds =  [
    { stateid: '1', name: 'chennai' }, 
    { stateid: '2', name: 'West Bengal' }
 ];

 function dropDownViewModel(dataSource)
 {
    this.cars = ko.observableArray(dataSource);
    this.selectedCar = ko.observable();
    this.selectionChanged = function()
    {
           CeremonyViewModel.dropdown()[1].cars(newds);
     }
  }

  function CeremonyViewModel() {

  this.dropdown = ko.observableArray();

   for(var i=0;i<2;i++)
   {
     this.dropdown.push(new dropDownViewModel(ds[i]));
   }

 }

 ko.applyBindings(new CeremonyViewModel());