如何创建动态下拉列表,其建议基于在第一个下拉框中选择的值。 因此,这里的服务下拉菜单显示不同的服务,如果我选择一项服务,则应在该服务可用的位置下拉框中显示位置。 因此如何创建一个基于第一个选择显示建议的保管箱。

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

#1楼 票数:0 已采纳

您可以从上至下或从下至上解决此问题。

即,自上而下的方法是在顶层下拉列表发生更改时设置会话变量,并通过该信息过滤内部层次下拉列表的内容。

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

由于自上而下的方法更容易掌握和处理,因此在此提供一个示例:

模板代码:

<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> ,即: <option value={{_id}}>{{name}}</option>

  ask by sharath94z translate from so

未解决问题?本站智能推荐:

2回复

javascript获取下拉框值

我想从下拉框中获取选定的值。 然后我想使用该值来改变背景图像。 我认为这两个代码片段很有用: 我已经在其中放入了两个警报,以测试是否发生了某些事情,但是它们甚至都没有出现。 另外,当我将forloop放置在addTextboxes()函数中时,它会将背景更改为第一个选定的选项,
1回复

使用ajax和jquery ui滑块实现一个下拉框

不幸的是我不太擅长编码,但我仍然在努力做到最好。 我最近开始使用带有ajax的jquery ui滑块来从我的数据库进行更新。 我的问题是我有滑块来改变一个参数,但我还需要一个带有第二个参数的下拉框。 我不知道如何使用现有的jquery滑块代码实现下拉框。 我想使用ajax,以便数
2回复

JS处理下拉框

我有这个脚本,允许用户从下拉列表1中选择,它将使用值填充下拉列表2。 这里的问题是,一旦它填满,原来的“项目”称为“ - Väljlänförst - ”就会消失,我不想这样做。 我只想让新值填满它。 有人可以看看我在下面提供的代码,看看有一个简单的解决方案吗? 提前致谢。 h
2回复

使用下拉框和文本框进行计算

在你们让我不尝试使用代码之前,我是Java的新手,我需要将此功能实现为一项非常重要的工作。 我从该线程获得了基础下拉计算,即Javascript下拉形式数学计算 。 我为我的代码修改了线程引用的代码 如果我的代码完全错误,请原谅我,我仍在尝试逐步进行。 如果您能帮助我查明错误和/
2回复

在下拉框旁边显示文本

我希望在下拉框旁边的文本中显示销售价格,但有一个问题。 这是我当前的代码: 现在,麻烦的是我无法更改代码的那部分。 我可以在其下放置HTML和Javascript,但是以上内容是由我使用的平台自动生成的。 我希望我在这篇文章中足够具体。 感谢您的任何帮助! 编辑
1回复

带有搜索和输入功能的 HTML 下拉框

我试图寻找我想要的东西,这是我能得到的最接近的: 使用 jQuery 使用搜索框创建下拉列表(作者 Yogesh Singh) https://makitweb.com/make-a-dropdown-with-search-box-using-jquery/ 它可以提供具有搜索功能的 H
1回复

下拉框未在 Chrome 扩展程序中显示数组

我正在使用数组来填充下拉框。 我想让下拉框在我正在构建的 chrome 扩展中工作 - 即下拉列表的内容由数组填充。 我遇到了一个问题,即 chrome 扩展似乎没有在下拉框中显示数组,但是,如果我将文件作为常规 HTML 页面(而不是浏览器扩展)运行,则下拉框会按预期工作。 *第一张图片是
2回复

将树json数据填充到下拉框

我有树格式的json数据: 所以我想像这样将数据填充到下拉框: 还是树视图允许选择子设备的值名称?