javascript - 选择选项后无法执行操作

Question

我可能会因此得到很多反对票，但我真的需要你的帮助，因为我正在挣扎。

我的 HTML 页面中有以下代码:

<div class="lines">
    <div class="formElement">
        <label>Activity</label>
        <select name="activity" id="activity" data-bind="options: activityArray, value: activity, event:{mouseover: interactive, mouseout: interactive}, onclick: interactive" style="width: 15em;"></select>
    </div>
    <div class="formElement">
        <label>Sub Activity</label>
        <select name="subActivity" id="subActivity" data-bind="options: subActivityArray, value: subActivity" style="width: 15em;"></select>
    </div>
</div>

这是我的 View 模型:

viewModelMain = function () {
    var
    mainData = ko.observableArray([]),
        showView = ko.observable(),
        activity = ko.observable(),
        activityArray = ko.observableArray(['licenses', 'services']),
        subActivity = ko.observable(),
        subActivityArray = ko.observableArray([]),
        request = ko.observable(),
        firstPayAmmount = ko.observable(),
        recuringAmmount = ko.observable(),
        comment = ko.observable(),

        interactive = function () {
            console.log("inside of interactive");
            if (this.activity() == 'licenses') {
                this.subActivityArray(['test']);
            } else this.subActivityArray(['test1']);
        };

    return {
        mainData: mainData,
        showView: showView,
        activity: activity,
        activityArray: activityArray,
        subActivity: subActivity,
        subActivityArray: subActivityArray,
        request: request,
        firstPayAmmount: firstPayAmmount,
        recuringAmmount: recuringAmmount,
        comment: comment,
        interactive: interactive
    };
},

我的问题是关于两个下拉菜单之间的依赖性。当选择第一个选项时，如何更改第二个下拉列表的值？ 正如您在上面的代码中看到的，我尝试了 event:{mouseover: Interactive, mouseout: Interactive} 但问题是，当选择第二个选项时，snd 下拉列表中的值直到鼠标再次移到选择框上才会更新。我确信有一种简单的方法可以做到这一点，但作为初学者，我无法发现它

Answer 1

subActivityArray 是否取决于所选事件。您可以按如下方式使用 ko.compulated :

subActivityArray =  ko.computed(function(){
    // get selected activity
    var a = activity();
    // returns the right sub activities
    if(a ==  'licenses')
      return ['license1', 'license2', 'license3'];
    if(a ==  'services')
      return ['service1', 'service2', 'service3'];
    return [];
})

由于鼠标事件不是必需的，您可以将它们从 View 中删除:

<div class="lines">
    <div class="formElement">
        <label>Activity</label>
        <select name="activity" id="activity" data-bind="options: activityArray, value: activity" style="width: 15em;"></select>
    </div>
    <div class="formElement">
        <label>Sub Activity</label>
        <select name="subActivity" id="subActivity" data-bind="options: subActivityArray, value: subActivity" style="width: 15em;"></select>
    </div>
</div> 

还有一点，你可以简化你的代码如下

ViewModelMain = function(){
    var self = this;
    self.mainData = ko.observableArray([]);
    self.showView = ko.observable();
    self.activity = ko.observable();
    self.activityArray = ko.observableArray(['licenses', 'services']);
    self.subActivity = ko.observable();
    self.subActivityArray =  ko.computed(function(){
        // get selected activity
        var a = self.activity();
        // returns the right sub activities
        if(a ==  'licenses')
          return ['license1', 'license2', 'license3'];
        if(a ==  'services')
          return ['service1', 'service2', 'service3];
        return [];
    });
    self.request = ko.observable();
    self.firstPayAmmount = ko.observable();
    self.recuringAmmount = ko.observable();
    self.comment = ko.observable(); 
}; 

var viewModelMain = new ViewModelMain();

希望对你有帮助