当选择另一个下拉菜单时，流星动态过滤下拉菜单 [英] Meteor dynamically filter dropdown when another dropdown is selected
问题描述
[更新：我回答了我自己的问题，意识到我遇到了一些奇怪的格式化 Session.get（） value，而我之前发布的代码应该有或多或少的工作。
[UPDATE: I answered my own question and realized the problem I was having had to do with some strange formatting of the Session.get() value, and the code I had posted previously should have more or less worked.
尽管如此，我想象其他人可能想要完成相同的任务，所以我投掷在meteor.com上创建一个玩具示例 here ，以便人们可以看到我想要做的事情（希望帮助别人寻找同样的解决方案）。当我从工作回家时，我会尝试记住将代码放在流星板上（我的办公室封锁它）。
Despite that, I imagine other people might want to accomplish the same task so I threw up a toy example on meteor.com here so people can see what I was trying to do (and hopefully help others looking for the same solution). When I get home from work I'll try and remember to put the code on meteorpad (my office blocks it).
这是原始的问题/后代解释： / p>
Here's the original question/explanation for posterity:
我想做的是让每个下拉列表选择在后续的下拉列表中触发一个mongo
查询，过滤其可用选项
基于上一个下拉列表设置的参数。
What I want to do is have each dropdown selection trigger a mongo query in the subsequent dropdown that filters its available options based on a parameter set by the previous dropdown.
推荐答案
[更新：查看此答案的实现 here ]
[UPDATE: view the implementation of this answer here]
可以，弄清楚如何做到这一点，但也意识到我有另一个可能导致问题的问题，并阻止我的 Session.set（）值设置正确（我将为该单独创建一个SO问题）。
OK, figured out how to do this, but also realized that I have another problem which was likely causing the issue, and preventing my Session.set() values from being set correctly (I'll create a separate SO question for that one).
我决定从头开始，只是制作一个刚刚拥有的玩具应用程序这两个下拉字段我可以获得依赖功能。
I decided to start from scratch and just make a toy app that just had the two dropdown fields so I could get the dependency functionality right.
My office blocks meteorpad, but I set the code up below so I think you'd be able to paste it in and try it out. I added a third field, and you can see that once the first(Dept.) field is selected, it updates the available options in the 2nd dropdown (Mfg.) and when you select a Mfg. value, it updates the 3rd (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'
})
}
});
}
这篇关于当选择另一个下拉菜单时，流星动态过滤下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
