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

Question

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

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

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

...这里是返回值的Meteor助手：

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

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

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

...在下拉选择后我不再有空行，但它也会在下拉前使AL成为默认值/显示值;我不希望这样 - 我希望它在默认情况下是空白的 - 但在下降时没有空值。

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

Answer 1

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

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