[PEMBARUAN: lihat implementasi jawaban ini di sini ]
Oke, menemukan cara melakukan ini, tetapi juga menyadari bahwa saya memiliki masalah lain yang mungkin menyebabkan masalah, dan mencegah Session.set() saya nilai agar tidak disetel dengan benar (saya akan membuat pertanyaan SO terpisah untuk pertanyaan itu).
Saya memutuskan untuk memulai dari awal dan membuat aplikasi mainan yang hanya memiliki dua bidang tarik-turun sehingga saya bisa mendapatkan fungsionalitas ketergantungan dengan benar.
Kantor saya memblokir meteorpad , tetapi saya mengatur kode di bawah ini jadi saya pikir Anda dapat menempelkannya dan mencobanya. Saya menambahkan bidang ketiga, dan Anda dapat melihat bahwa setelah bidang (Dept.) pertama dipilih, itu memperbarui opsi yang tersedia di dropdown ke-2 (Mfg.) dan ketika Anda memilih nilai Mfg., itu memperbarui ke-3 (Vendor ).
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'
})
}
});
}
