dynamic dropdown box , whose suggestion is based on the value selected in the first dropbox using meteorjs

Question

How to create a dynamic dropdown box , whose suggestion is based on the value selected in the first dropbox. so here service dropdown display different service , if i select one service it should display location in location dropbox where this service is available . so how to create a dropbox which shows suggestion based on the first selection.

 <template name="services">
      <select name="services" id="services_types">
              <option value="" disabled selected >select your service</option>
              {{#each serviceName}}
              <option>{{name}}</option>
              {{/each}}
      </select>
 </template>    


 <template name="location">
      <select name="location" id="location-areas">
              <option value="" disabled selected >select your location</option>
              {{#each locationName}}
              <option>{{name}}</option>
              {{/each}}
      </select>
 </template> 

 <template name="providers">
      <select name="provider" id="provider_names">
              <option value="" disabled selected >select your provider</option>
              {{#each providerName}}
              <option>{{name}}</option>
              {{/each}}
      </select>
 </template> 

Answer 1

You can attack this problem either from top down or from bottom up.

Namely, a top down approach would be to set a session variable when a top level drop down changes, and filter the inner level drop down's contents by that information.

A bottom up approach would be to access the top level template's instance and its data context from the inner level, and use that information to filter for information.

Since the top down approach is much easier to grasp and handle, I'll provide an example of that here:

Template code:

<template name="services">
      <select name="services" id="services">
              <option value="" disabled selected >select your service</option>
              {{#each serviceName}}
              <option>{{name}}</option>
              {{/each}}
      </select>
 </template>    


 <template name="locations">
      <select name="locations" id="locations">
              <option value="" disabled selected >select your location</option>
              {{#each locationName}}
              <option>{{name}}</option>
              {{/each}}
      </select>
 </template> 

Helpers and events code:

Template.services.helpers({
  serviceName: function() {
    return serviceName.find();
  }
});

Template.services.events({
  'change #services': function(e) {
    var selectedService = $("#services option:selected").text();
    Session.set("selectedService", selectedService);
  }  
})

Template.locations.helpers({
  locationName: function() {
    var selectedService = Session.get("selectedService");
    return locationName.find({service: selectedService});
  }
})

You can play around with the full example on Meteorpad at http://meteorpad.com/pad/8ZKsudafxqs3FFbfp/SO-27950673

Please also note that I'm using arbitrary documents which reference each other by name. You should design with id's.

Also, I'm using jquery's text() to get the value of whatever is selected, you should use proper value properties which get the id's, namely: <option value={{_id}}>{{name}}</option>