Why is an empty val prepended to a JSON array not used by the Selection element?

Question

In my Meteor app, I am populating a "States" select element like this:

main.html:

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

main.js:

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

Since "AL" (Alabama) was always the default value, I wanted to add a default value of an empty string, so I changed the helper to this:

Template.addJobLoc.helpers({
  statesAndProvinces: function() {
    return [{
      "hint": "No selection",
      "abbrcode": ""
    }, {
      "hint": "Alabama",
      "abbrcode": "AL"
    }, {
    . . .

However, "AL" still displays as the first/default value - why? How can I make the default val an empty string?

Answer 1

Here's a simpler pattern:

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

Just use your original helper with the list of states.