Filter the collection in Select2 based on another Select2 in MeteorJS

Question

I would like to filter my Products collection to display a dropdown (select2) based on the ItemCategory in the previous select2.

Currently, I can get the value from the ItemCategory SELECT2 but have no idea how to use that value in Products.find() which should update when I choose the option.

Here is the current code:

HTML Template name=receiveForm

<label for="category">Select Category: </label>
<select class="sel2js" id="category_sel" name="category">
      {{#each itemcategories}}
        {{> sel_itemcategory}}
      {{/each}}
    </select>
<label for="product">Product Name: </label>
<select class="sel2js" name="product">
      {{#each products_filtered}}
        {{> sel_product}}
      {{/each}}
    </select>

JS

Template.receiveForm.helpers({
itemcategories: function(){
  return ItemCategories.find({});
},
products_filtered: function(){
  return Products.find({category: itemcat_filter});
}
});

Template.receiveForm.onRendered(function(){
$(".sel2js").select2().on('change', function(e){
  var itemcat_filter = e.target.value;
  console.log(itemcat_filter)
});
});

Schema

ItemCategories name: String

Ex: Raw Materials, Packagings, etc

Products name: String category: String (get from ItemCategories)

Ex: Box / Packagings, Butter / Raw Materials

Answer 1

Use a session variable to store itemcat_filter:

// Introduce a default category:
var defaultCategory = '...';

// Update your products_filtered:
return Products.find({category: Session.get('itemcat_filter', defaultCategory});

// Update your onRendered:
$(".sel2js").select2().on('change', function(e){
  Session.set('itemcat_filter', e.target.value);
  console.log(itemcat_filter)
});