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

Question

I've got an empty first item in my select element:

I don't know why; here's the HTML/Spacebars in my Meteor app:

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

...and here's the Meteor helper that returns the values:

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

If I remove this line from the HTML/Spacebars:

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

...I no longer have the empty line after dropping down the select, but it also makes AL the default/displayed value prior to dropdown; I don't want that - I want it to be blank by default - yet not have an empty value when dropping down.

How can I 86 the superfluous prepended empty item without adding Abalama as the default value?

Answer 1

You need to change <option selected="selected"></option> to <option selected="selected" disabled hidden></option>.

This will display an empty option by default, but if users choose an option they won't see the blank one nor will they be able to select it.