选择另一个下拉列表时，流星动态过滤下拉列表 [英] Meteor dynamically filter dropdown when another dropdown is selected
问题描述
[更新:我回答了我自己的问题并意识到我遇到的问题与 Session.get() 值的一些奇怪格式有关，以及我之前发布的代码应该或多或少有用.
[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 以便人们可以看到我正在尝试做的事情(并希望帮助其他人寻找相同的解决方案).当我下班回家时，我会试着记住把代码放在meteorpad上(我的办公室屏蔽了它).
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).
这是给后代的原始问题/解释:
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.
推荐答案
[UPDATE: 查看这个答案的实现 这里]
[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.
我的办公楼 meteorpad，但我在下面设置了代码，所以我想你可以粘贴它试一试.我添加了第三个字段，您可以看到，一旦选择了第一个(部门)字段，它就会更新第二个下拉列表 (Mfg.) 中的可用选项，当您选择一个 Mfg. 值时，它会更新第三个(供应商)).
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屋！
