为什么我的 select 元素开头有一个空项？

Question

我的 select 元素中有一个空的第一项：

我不知道为什么；这是我的 Meteor 应用程序中的 HTML/Spacebars：

<select id="stateorprovince" name="stateorprovince">
    <option selected="selected"></option>
    {{#each statesAndProvinces}}
      <option title="{{hint}}">{{abbrcode}}</option>
    {{/each}}
</select>

...这是 returns 值的 Meteor 助手：

Template.addPerson.helpers({
  statesAndProvinces: function() {
    return [{
      "hint": "Alabama",
      "abbrcode": "AL"
    }, {
      "hint": "Alaska",
      "abbrcode": "AK"
    }, {
    . . .

如果我从 HTML/Spacebars 中删除这一行：

<option selected="selected"></option>

...下拉 select 后我不再有空行，但它也使 AL 在下拉之前成为 default/displayed 值；我不想要那个 - 我希望它默认为空白 - 但在下拉时没有空值。

如何在不添加 Abalama 作为默认值的情况下 86 多余的前置空项？

Answer 1

您需要将 <option selected="selected"></option> 更改为 <option selected="selected" disabled hidden></option>。

这将默认显示一个空选项，但如果用户选择一个选项，他们将看不到空白选项，也无法select它。

为什么我的 select 元素开头有一个空项？

Why does my select element have an empty item at the beginning?

meteor

drop-down-menu

spacebars

meteor-blaze

meteor-helper