动态下拉框，其建议基于使用 meteorjs 在第一个下拉框中选择的值

Question

如何创建动态下拉框，其建议基于第一个下拉框中 selected 的值。所以这里的服务下拉列表显示不同的服务，如果我 select 一项服务，它应该在该服务可用的位置下拉框中显示位置。那么如何创建一个根据第一个 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

您可以自上而下或自下而上解决此问题。

也就是说，自上而下的方法是在顶层下拉菜单更改时设置会话变量，并根据该信息过滤内部层下拉菜单的内容。

自下而上的方法是从内部级别访问顶级模板的实例及其数据上下文，并使用该信息来过滤信息。

由于自上而下的方法更容易掌握和处理，我将在此处提供一个示例：

模板代码：

<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>

助手和事件代码：

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});
  }
})

您可以在 http://meteorpad.com/pad/8ZKsudafxqs3FFbfp/SO-27950673

上的 Meteorpad 上试用完整示例

另请注意，我使用的是按名称相互引用的任意文档。你应该用 id 来设计。

此外，我正在使用 jquery 的 text() 来获取所选内容的值，您应该使用获取 id 的正确 value 属性，即：<option value={{_id}}>{{name}}</option>

动态下拉框，其建议基于使用 meteorjs 在第一个下拉框中选择的值

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

javascript

dynamic

dropdownbox

meteor