Dropdown menu 1 choice affects choices in dropdown menu 2 - most efficient way?

Let’s say I have one dropdown menu, and whatever the user chooses will decide what’s shown in the next dropdown.

I can think of a couple ways to do this:

  1. When dropdown 1 changes, update the subscription to the data that populates dropdown 2.
  2. When dropdown 1 changes, change a reactive variable that changes the results returned by the helper that populates dropdown 2.

So for instance, in scenario 1:

Template.page.events({
  'change #dropdown1': function(event) {
    var item = event.target.value;
    Template.instance().subscribe('populateDropdown2', {limit: item});
  });
});

Scenario 2:

Template.page.events({
  'change #dropdown1': function(event) {
    var item = event.target.value;
    Session.set('chosenItem', item);
  });
});

Template.page.helpers({
  dropdown2Elements: function() {
    return Elements.find({quality: item});
  }
});

Hi, the Meteor Chef has a good tutorial on this: https://themeteorchef.com/snippets/reactive-dict-reactive-vars-and-session-variables/