jquery - DevExtreme 動的 dxSelectBox クリア オプションの問題

Question

動的に値を持つ 2 つの dxSelectBox コントロールを作成しました。次の手順を実行します

ステップ 1: 最初の選択ボックス項目から「インド」を選択します

ステップ 2: 2 番目の選択ボックス項目から「ムンバイ」を選択します

ステップ3：（私の問題）最初の選択ボックスで「USA」を選択してから、2番目の選択ボックスの値をクリアする必要がありますが、値がクリアされません。

dxSelectBox値変更イベントで、別のdxSelectBox 値をクリアする必要があります

HTML コード (表示):

  <div data-bind="foreach: selectlist">
       <div data-bind="dxSelectBox: {dataSource: selectBoxDataSource, valueExpr: 'id',displayExpr:'name', onOpened:loaddatasource, valueChangeAction: processValueChange,value: selectValue, showClearButton:true }">
       </div>
  <br />
  </div>

JS コード:

js コード:

Application1.About = function (params) {
   var ds = [];
   ds[0] = [{ "id": "1", "name": "India" }, { "id": "2", "name": "USA" }];

   ds[1] = [
    { "id": "1", "name": "NewDelhi" },
    { "id": "2", "name": "Mumbai" },
    { "id": "3", "name": "California" },
    { "id": "4", "name": "Washington DC" }
   ];


  function selectViewModel(dataSource) {
    console.log(dataSource);
    this.selectBoxDataSource = ko.observableArray('');
    this.selectValue = ko.observable();
    this.loaddatasource = function (e) {
        this.selectBoxDataSource(dataSource);
    };
    this.processValueChange = function (e) {
        viewModel.selectlist()[1].selectValue("");
    }
  }

  var viewModel = {
    selectlist: ko.observableArray(),
    viewShown: function () {
        this.selectlist.push(new selectViewModel(ds[0]));
        this.selectlist.push(new selectViewModel(ds[1]));
    }
  };
   return viewModel;
 };