在Meteor中级联选择控件

Question

I'm using Meteor 1.* and would like to create two cascading "dependent" select controls on a form.

For example, a Countries/Cities or or "Car Maker"/"Car Model" -- basically a parent child relationship.

I don't want to retrieve the data from the database each time I select the parent category.

I'd like to have something along these lines:

Template.registerHelper("getCarMakers", function () {
  return [
    {label: "Chevy", value: "camaro"},
    {label: "Chevy", value: "corvette"},
    {label: "Ford", value: "mustang"},
    {label: "Dodge", value: "viper"},
    {label: "Dodge", value: "charger"}
  ];
});

The above is what I'd normally do to populate a regular select control.

But the list will be too big in my case. And further, the reason I just don't make a group select control is again, because this list is just too big. Also, the reason I don't make a group select with a search option, is because I don't want introduce that feature at this time (maybe in the future I'd do something like this to account for large lists).

So I'd like to make two select controls. The first will have the high level category (or parent), and based on that selection, the second select control would "display" or "filter" the related items or "child" items.

I don't mind pushing all the data to the client to start and then filtering (actually I'd prefer doing that).

Answer 1

For meteor packages that might help, take a look at:

• https://atmospherejs.com/ground/db
• https://atmospherejs.com/ground/localstorage

Depending on your data set size, you might run into localstorage limitations, so you might need to check your target browser capacities.