当只有一个值存在时，请从 Meteor 的下拉列表中选择

Question

我正在尝试从流星的下拉列表中选择一个值。

即使它是唯一的，它也应该是可选的，因为我有一个基于它的点击事件。

'click option[data-action="doSomething"]': function(event, template){
    event.preventDefault();
    console.log('Pressed');
    //Do something here.
  }

HTML 看起来像：

{{#each something}}
<option data-action="doSomething" {{setSelected}}>{{nickname}}</option>
{{/each}}

当我尝试选择时，这一切都有效，但仅当有超过 1 个值可供选择时。

有谁知道如何选择只有 1 个值存在？使用 click option .

Answer 1

"click"事件不会始终适用于<option>元素。请改用<select>元素本身上的"change"事件。然后，您可以从事件处理程序访问 <option> 元素的值，并从那里应用逻辑。

事件

'change .actionSelect': function(event, template){
  const selectElem = event.currentTarget;
  switch(selectElem.value)
  {
    case 'action1': 
      // Do a thing
      break;
    case 'action2': 
      // Do a different thing
      break;
  }
}

模板

<select class="actionSelect">
  {{#each thing in something}}
    <option value="{{thing.action}}" selected="{{thing.setSelected}}">{{thing.nickname}}</option>
  {{/each}}
</select>

注意：我使用了"每个...in"循环在这里，因为这是最佳实践。防止模板级变量在循环中变得不可访问。

正如 HMR 在注释中提到的，您可能还希望添加一个默认的 <option disabled> 元素，以便您可以确保在只有一个选项时提示用户选择"新"内容。