Meteor filtrerer dynamisk dropdown, når en anden dropdown er valgt

[OPDATERING: se implementeringen af dette svar her ]

OK, fandt ud af, hvordan man gør dette, men indså også, at jeg har et andet problem, som sandsynligvis forårsagede problemet og forhindrede min Session.set() værdier fra at være indstillet korrekt (jeg opretter et separat SO-spørgsmål til det).

Jeg besluttede at starte fra bunden og bare lave en legetøjsapp, der bare havde de to rullemenuer, så jeg kunne få afhængighedsfunktionaliteten rigtig.

Mit kontor blokerer meteorpad , men jeg har konfigureret koden nedenfor, så jeg tror, du ville være i stand til at indsætte den og prøve den. Jeg tilføjede et tredje felt, og du kan se, at når først det første (Afd.) felt er valgt, opdaterer det de tilgængelige muligheder i den 2. rullemenu (fabrikant), og når du vælger en fabrikantværdi, opdaterer det den tredje (leverandør) ).

main.html

<head>
  <title>Dropdown Test</title>
</head>

<body>

  {{> dropdowns}}

</body>

<!-- Begin Templates  -->
<template name="dropdowns">
  <field class="dept-name">Dept:
    {{> departments}}
  </field>
  <field class="mfg-number">Mfg:
    {{> manufacturers}}
  </field>
  <field class="vendor-name">Vendor:
    {{> vendors}}
  </field>
</template>

<!-- Department dropdown -->
<template name="departments">
  <select autocomplete="off" name="departmentNums" class="form-control department-selection">
    {{# each departmentNums}}
    {{> departmentNum}}
    {{/each}}
  </select>
</template>

<template name="departmentNum">
  <option>{{dept}}</option>
</template>

<!-- Manufacturer dropdown -->
<template name="manufacturers">
  <select autocomplete="off" name="manufacturerNums" class="form-control manufacturer-selection">
    {{# each manufacturers}}
    {{> manufacturerNum}}
    {{/each}}
  </select>
</template>

<template name="manufacturerNum">
  <option>{{mfg}}</option>
</template>

<!-- Vendor dropdown -->
<template name="vendors">
  <select autocomplete="off" name="vendorNames" class="form-control vendor-selection">
    {{# each vendorNames}}
    {{> vendorName}}
    {{/each}}
  </select>
</template>

<template name="vendorName">
  <option>{{name}}</option>
</template>

main.js

Vendors = new Mongo.Collection('vendors');

if (Meteor.isClient) {
  /****************************** Subscriptions ********************************/
  Meteor.subscribe('vendors');


  /****************************** Department templates js ***********************/
  Template.departments.helpers({
    departmentNums: function() {
      // Get all the departments and sort them ascending
      var everything = Vendors.find({}, {sort: {dept:1}}).fetch();
      // De-dupe list of departments
      var justDepartments = _.pluck(everything,"dept");
      return _.uniq(justDepartments);
    }
  });

  Template.departments.events({
    "change .department-selection": function(e, t){
      return Session.set("department", $("[name=departmentNums]").val());
    }
  });

  /****************************** Manufacturer templates js *********************/
  Template.manufacturers.helpers({
    manufacturers: function() {
      // Find only manufacturers that have the same dept as the session and sort them ascending
      var everything = Vendors.find({dept: Session.get('department')}, {sort: {mfg:1}}).fetch();
      // De-dupe list of manufactuerers
      var justManufacturers = _.pluck(everything, "mfg");
      return _.uniq(justManufacturers);
    }
  });

  Template.manufacturers.events({
    "change .manufacturer-selection": function(e, t){
      return Session.set("manufacturer", $("[name=manufacturerNums]").val());
    }
  })

  /****************************** Vendor templates js *************************/
  Template.vendors.helpers({
    vendorNames: function(){
      // Filter on vendors that have the same dept and mfg as in previous dropdowns
      return Vendors.find(
        {dept: Session.get('department'),
         mfg: Session.get('manufacturer')}
        );
    },

    getVendorName: function() {
      Session.set("vendor", $("[name=vendorNames]").val());
    }
  });

  Template.vendors.events({
    "change .vendor-selection": function(e, t){
      return Session.set("vendor", $("[name=vendorNames]").val())
    }
  });
}

// Populate Vendors collection if empty
if (Meteor.isServer) {
  Meteor.startup(function() {
    // Make sure the Vendors collection has data
    if (Vendors.find().count() === 0) {
      Vendors.insert({
        name: 'CHANEL',
        dept: '143',
        mfg: '23'
      });

      Vendors.insert({
        name: 'GUCCI',
        dept: '234',
        mfg: '36'
      });

      Vendors.insert({
        name: 'COACH',
        dept: '636',
        mfg: '99'
      });

      Vendors.insert({
        name: 'ROBERTO-COIN',
        dept: '989',
        mfg: '1'
      });

      Vendors.insert({
        name: 'TOP SHOP',
        dept: '143',
        mfg: '86'
      });

      Vendors.insert({
        name: 'KIMs SHIRTS',
        dept: '234',
        mfg: '86'
      })
    }
  });
}