Unable to perform an action after selecting an option

Question

I will probabbly get a lot of downvotes for this, but I really need your help as I'm struggling.

I have this code in my HTML page:

<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>

and here is my viewModel:

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
    };
},

My question is regarding the dependency between the 2 drop downs. How can I change the values of the 2nd dropdown when an option on the 1st is selected? As you can see in the above code, I have tried event:{mouseover: interactive, mouseout: interactive} but the problem with it is that when the 2nd option is selected the value in the snd drop down is not updated untill the mouse goes again over the select box. I'm sure that there is an easy way to make this, but as a beginner, I'm not able to spot it

Answer 1

If the subActivityArray depends on the selected activity. You can use the ko.computed as follow :

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 [];
})

As the mouse events aren't necessary you can remove them from the 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> 

Another point, you can simplify your code as follow

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();

I hope it helps

Answer 2

I would suggest looking into doing a subscribe on your activity observable.

Would be something like this:

activity.subscribe(function(newValue) {
    if (newValue == 'licenses') {
            this.subActivityArray(['test']);
        } else this.subActivityArray(['test1']);
});

This function would run any time your activity observable is updated.