不同集合中的从属下拉菜单

Question

I'm new in Meteor. I'm trying to make dropdown menu dependent in other dropdown. The first one for client name in Customers collection & the second for the client address in Addresses collection. I've 2 collections Customers & Addresses. This is my code but don't know what to do next.

EDIT: i put both templates in another template called new order

HTML:

<template name="selectClient">
  Client Name :
<select class="select">
  <option selected disabled>Choose client name</option>
  {{#each custom}}
  <option>{{clientName}}</option>
  {{/each}}
</select>
</template>
<template name="selectAddress">
  Address:
<select class="select" name="Choose the address">
  <option selected disabled>Choose the address</option>
  {{#each address}}
  <option>{{addressName}}</option>
  {{/each}}
</select>
</template>

main.js

Template.selectClient.helpers({
    'custom': function(){
        return Customers.find();
    }
  });
  Template.selectAddress.helpers({
    'address': function(){
        return Addresses.find();
    }
});


var clientName= $('[name="newName"]').val();
    var mobNumber = $('[name="newMob"]').val();
    var age = $('[name="age"]').val();
    var radioValue= $('[name="gender"]').val();
    Customers.insert({
    clientName: clientName,
    age: age,
    radioValue:gender,
    createdAt: new Date()
    });

var addressName = $('[name="addressName"]').val();
    var detail = $('[name= details]').val();
    Addresses.insert({
      addressName: addressName,
      detail: detail,
      createdAt: new Date()
    });

Customers = new Mongo.Collection('customers');
Addresses = new Mongo.Collection('addresses');
Mobile = new Mongo.Collection('mobile');

Answer 1

Since you are using two templates in parallel (and not in a parent-child relation) you may use a ReactiveVar to cache the current selected client name:

const selectedCustomer = new ReactiveVar()

Note, that it needs to be accessible for both templates. Either you declare it with both templates in one file or your use import / export to provide access over many files.

Now your customers select needs to have a value assigned to each option , so we can cache it on selection change:

<template name="selectClient">
    Client Name :
    <select class="select-customer">
        <option selected disabled>Choose client name</option>
        {{#each custom}}
            <option value="clientName" selected="{{#if selectedClient clientName}}selected{{/if}}">{{clientName}}</option>
        {{/each}}
    </select>
</template>

I renamed it's class, to prevent confusion in naming, to select-customter . Noticed the {{#if selectedClient}}... code? We will use a helper to restore the last selected state on the dropdown. Otherwise your dropdown selection will reset on the next rendering cycle:

Template.selectClient.helpers({
  'custom': function(){
    return Customers.find();
  },
  selectedClient(name) {
    const selected = selectedCustomer.get()
    return selected && selected.clientName === name
  }
});

We get the selected customer from the cache and check if the current option's value is the same. If true we can flag the option as selected .

Now you still need an event that covers the selected client:

Template.selectClient.events({
  'change .select'(event, templateInstance) {
    // get the value using jQuery
    const value = templateInstance.$(event.currentTarget).val()
    // update the ReactiveVar
    selectedCustomer.set({ clientName: value })
  }
})

It saves the selected value (currently the clientName ) in a query-able format. Now in your adresses you just need to query all Adresses documents using the cached selected client:

Template.selectAddress.helpers({
  'address': function(){
    const query = selectedCustomer.get() || {}
    return Addresses.find(query);
  }
});

If a client is selected it will server as the query, otherwise all adresses will be returned.

The good thing is, that this ReactiveVar already provides you the capability to trigger a new rendering cycle if it updates, since your helpers' code relies on it and Blaze automatically resolves this for you.

Modificatopns

This code assumes, that Adresses have a relation to Customers by a field named clientName . If you have stored the relation by using other fields, such as _id - clientId you need to modify your code accordingly.

You could also hide the second dropdown and only display it, if there is a value in selectedCustomer .