阵列中的 MVC 淘汰赛级联下拉菜单

Question

Knockout 新手，将我的 MVC 应用程序从使用 Telerik MVC 组合框迁移到 Knockout。 我使用 Ajax 生成两个数组，并使用以下命令将它们绑定到 Knockout select：

<select data-bind='options: myFirstList, optionsText: "Text", optionsCaption: "Select...", value: 0'> </select>
<select data-bind='options: mySecondList, optionsText: "Text", optionsCaption: "Select...", value: 0'> </select>



  function myViewModel() {
        this.myFirstList = ko.observableArray([]);
        this.mySecondList = ko.observableArray([]);

       }
    var objVM = new myViewModel();
    ko.applyBindings(objVM);

Using Ajax:
  $.ajax({
            url: '/Home/CheckWord',
            type: 'POST',
            data: {
                cword: wordtocheck
            },
            success: function (data) {
              .....

                }
                objVM.mySecondList(stateList[0]);

                var fnArray = [];

                for (var k = 0; k < data.fnList.length; ++k) {
                    fnArray[k] = { Text: data.fnList[k], Value: k };
            }

                objVM.myFirstList(fnArray);
            },
            error: function () {
                alert("n");
            }
        });

无法弄清楚如何根据从第一个列表中选择的项目更改第二个选择列表，以及如何使用从第二个列表中选择的项目触发 Javascript 操作。 如果有人能给我举个例子，将不胜感激。

Answer 1

在 HTML 中，将 'value' 绑定到 observable

<select data-bind='options: myFirstList, optionsText: "Text",
  optionsCaption: "Select...", value: myFirstListSelected'> </select>
<select data-bind='options: mySecondList, optionsText: "Text",
  optionsCaption: "Select...", value: mySecondListSelected'> </select>

在 JS 中，使用 subscribe 来监听模型的变化事件

function myViewModel() {
  var self = this;
  self.myFirstList = ko.observableArray([]);
  self.mySecondList = ko.observableArray([]);
  self.myFirstListSelected = ko.observable();
  self.mySecondListSelected = ko.observable();
  // when first selected changes
  self.myFirstListSelected.subscribe(function(newVal) {
    // ignore blank selection
    // or you can clear second list when user deselects first one.
    // if (newVal == null) {
    //   self.mySecondListSelected(undefined);
    //   self.mySecondList.removeAll();
    //   return;
    //  }
    if (newVal == null) return;
    $.ajax({
      //...
      data: { cword: newVal },
      success: function (data) {
        //...
        // clear selected
        self.mySecondListSelected(undefined);
        // reload second list
        self.mySecondList(stateList[0]);
        //...
      }
      //...
    });
  });
  // when second selected changes
  self.mySecondListSelected.subscribe(function(newVal) {
    //... beware newVal could be null or undefined when user deselects it.
  });
}