Question

如何创建动态下拉框，其建议基于第一个保管箱中选择的值。所以这里服务下拉列表显示不同的服务，如果我选择一个服务，它应该在该服务可用的位置下拉框中显示位置。所以如何创建一个基于第一个选择显示建议的Dropbox。

 <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()来获取所选内容的值，你应该使用正确的value属性获取id，即：<option value={{_id}}>{{name}}</option>

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

1 个答案: