"selected" 流星模板下拉菜单中的属性不起作用

Question

我对 meteor 模板中的下拉列表有疑问；这有点深奥，但希望能在以下方面提供一些帮助：

<template name="TeamsLeftDropDown">
  <select class="teamsLeftDropDown" name="">
    <option disabled selected="selected">Pick this week's team</option>
    {{#each teamsLeft}}
      <option value={{.}}>{{.}}</option>
    {{/each}}
  </select>
  <input type="button" name="quickChoiceButton" value="Submit">
</template>

下拉列表由 disabled 和 selected 选项组成，后跟基于简单数组 teamsLeft 的选项列表。当页面加载时，disabled/selected 选项应该位于顶部。到目前为止一切顺利。

单击按钮时，选定的团队被发送到数据库，teamsLeft 数组被过滤以删除选定的团队 - 模板自动重新呈现 （赞be to Meteor) 和下拉选项都是应该的。

BUT 现在下拉列表的行为就好像 teamsLeft 数组中的第一个团队是 selected（比如 "Team A"） - 而不是 pick this week's team 选项（即使它仍然存在，上面带有 selected 和 disabled 属性）。

很抱歉提出这么长且小众的问题，但如果有人知道为什么会这样，我将不胜感激。

Answer 1

这里发生的事情是，当页面首次加载时，禁用的选项就是您的 select 标记中的所有内容，因为尚未呈现 "teamsLeft" 变量中添加的选项然而。因此，默认情况下禁用选项得到 selected。当您 select 在所有内容都已呈现后选择一个选项时，该选项将成为 selected 选项。然后，当您单击 "Submit" 按钮并更新数据库时，"teamsLeft" 中的选项会重新呈现。发生这种情况时，选项会迅速从 DOM 中删除并重新添加。在删除选项时，在此中间状态下，禁用选项是DOM中剩下的全部。但是，由于它被禁用，浏览器不会将其设为 selected 选项。当 "teamsLeft" 选项被添加回 DOM 时，浏览器 select 是第一个被添加的选项，因为它没有被禁用。

要解决此问题，您可以执行以下任一操作（第一种更容易，也是首选方法）：

1) 从您的第一个选项中删除 "disabled" 属性，并在您的提交函数中验证用户没有 select 编辑此选项。

2) 在您的提交功能中（可能在您进行数据库更新之后），设置一个 Tracker.afterFlush 将 select 您的第一个选项重新呈现。一种可能的实现如下所示：

Tracker.afterFlush(function() {
  jQuery(".teamsLeftDropDown option:first").prop("selected",true);  
});

"selected" 流星模板下拉菜单中的属性不起作用

"selected" attribute in drop-down menu in meteor template not working

html

meteor

drop-down-menu

html-select