Javascript 如何在Meteor中使用html选择选项？

我很难得到一个HTML选择选项，以工作的方式，我认为它应该在流星工作

下面是一个示例，演示了如何使用名为Countries的集合的按钮

模板

{{#each get_countries}}
  <button class="btn btnCountryTest">{{iso3}} - {{name}} </button><br />
{{/each}}

<select class="input-xlarge country" id="country" name="country">
  {{#each get_countries}}
    <option value="{{iso3}}">{{name}}</option>
  {{/each}}
</select>

<select class="input-xlarge country" id="country" name="country">
  {{#each get_countries}}
    <option value="{{iso3}}" data-id={{_id}}>{{name}}</option>
  {{/each}}
</select>

生成正确的输出，例如

clicked .btnCountryTest this._id: 39cd432c-66fa-48de-908b-93a874323e2e

现在，当从HTML选择选项下拉列表中选择一个项目时，我希望能够触发其他页上活动。我知道我可以将ID放入选项值中，然后使用Jquery等。。。我原以为它只适用于Meteor，但我不知道怎么做

这就是我正在尝试的，但它不起作用

模板

{{#each get_countries}}
  <button class="btn btnCountryTest">{{iso3}} - {{name}} </button><br />
{{/each}}

<select class="input-xlarge country" id="country" name="country">
  {{#each get_countries}}
    <option value="{{iso3}}">{{name}}</option>
  {{/each}}
</select>

<select class="input-xlarge country" id="country" name="country">
  {{#each get_countries}}
    <option value="{{iso3}}" data-id={{_id}}>{{name}}</option>
  {{/each}}
</select>

产生

Template.users_insert.events click .country this._id: undefined

显然不是我所期望的。在我使用Jquery表单处理之前，有人有什么想法吗

谢谢 Steeve

在Meteor中，每个助手都调用Meteor.ui.listChunk请查看packages/templating/deftemplate.js，它将当前变量视为此上下文

换句话说，它是click country（单击国家/地区）中的全局上下文，您只能访问每个块下的。\ u id，就像在click country（单击国家/地区）选项事件中一样

我认为您可以将数据放在HTML数据属性中，并使用jQuery访问它。就这样-

模板

{{#each get_countries}}
  <button class="btn btnCountryTest">{{iso3}} - {{name}} </button><br />
{{/each}}

<select class="input-xlarge country" id="country" name="country">
  {{#each get_countries}}
    <option value="{{iso3}}">{{name}}</option>
  {{/each}}
</select>

<select class="input-xlarge country" id="country" name="country">
  {{#each get_countries}}
    <option value="{{iso3}}" data-id={{_id}}>{{name}}</option>
  {{/each}}
</select>

---

也许你也可以看看“packages/liveui/liveui.js”。有一个findEventData函数，它为回调函数提供此对象。

如果试图访问数据上下文，则需要为事件处理程序提供对模板参数的访问权限，并使用它的数据对象。这是顶级数据上下文

“单击国家”：函数事件，模板{ console.log'Template.users\u insert.events click.country\u id:'+Template.data.\u id； }

---

应该有用。以下是我能找到的关于此的最佳文档：

您正在收听select的“单击”事件。您确实想订阅“更改”活动。”单击html元素时会发生“单击”。另一方面，从列表中选择一个值后会触发“更改”事件。

@StevenCannon，我遇到了类似的问题，并在这里找到了解决方案-@DenisBrat是正确的，请侦听更改事件而不是单击事件

以下是为您修改的解决方案：

'change select'(event) {
    // Prevent default browser form submit
    event.preventDefault();

    var selectedCountry = event.target.value;

    console.log('Template.users_insert.events change select iso3: ' + selectedCountry);
}