Click here to Skip to main content
16,018,006 members
Articles / Web Development / HTML

Adding a State/Province Select Element to Your Meteor Apps

Rate me:
Please Sign up or sign in to vote.
4.47/5 (5 votes)
19 Sep 2015CPOL2 min read 9.9K   1   2
Copy-and-pastable HTML and JS to provide State/Province Select Options for your Meteor app

Meteors Are Not Needed Less Than Mountains

Oftentimes we see Select elements on web sites/apps containing as options all the States in the U.S. Of course, depending on where you live and/or your target audience, you may want to populate the Select element with different values, but for those serving the U.S. market, the snippets that follow can be used completely "as-is" in a Meteor app, with the sole exception that you will need to replace the Template name ("addJobLoc" in the snippets below) with the name of your own Template.

As an added bonus (and free, to boot!), I'm adding Canadian Provinces and Territories, too. After all, how can we forget, neglect, or "dis" our neighbors to the North, who gave us Neil Young, Gordon Lightfoot, the Guess Who, Rush, Bryan Adams, Anne Murray, most of the cats from The Band, J. Kenneth Galbraith, Ferguson Jenkins, Steve Nash, "Strange Brew", maple syrup, etc.

First, add this HTML and SpaceBars code in your Template's .html file:

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

Note that I am using the full place name as the "hover hint" for the item, and the two-letter designation as the content (select options).

Now put this code in the corresponding *.js file for the Template:

Template.addJobLoc.helpers({
  statesAndProvinces: function() {
    return [{
      "hint": "Alabama",
      "abbrcode": "AL"
    }, {
      "hint": "Alaska",
      "abbrcode": "AK"
    }, {
      "hint": "American Samoa",
      "abbrcode": "AS"
    }, {
      "hint": "Arizona",
      "abbrcode": "AZ"
    }, {
      "hint": "Arkansas",
      "abbrcode": "AR"
    }, {
      "hint": "British Columbia",
      "abbrcode": "BC"
    }, {
      "hint": "California",
      "abbrcode": "CA"
    }, {
      "hint": "Colorado",
      "abbrcode": "CO"
    }, {
      "hint": "Connecticut",
      "abbrcode": "CT"
    }, {
      "hint": "Delaware",
      "abbrcode": "DE"
    }, {
      "hint": "District Of Columbia",
      "abbrcode": "DC"
    }, {
      "hint": "Federated States Of Micronesia",
      "abbrcode": "FM"
    }, {
      "hint": "Florida",
      "abbrcode": "FL"
    }, {
      "hint": "Georgia",
      "abbrcode": "GA"
    }, {
      "hint": "Guam",
      "abbrcode": "GU"
    }, {
      "hint": "Hawaii",
      "abbrcode": "HI"
    }, {
      "hint": "Idaho",
      "abbrcode": "ID"
    }, {
      "hint": "Illinois",
      "abbrcode": "IL"
    }, {
      "hint": "Indiana",
      "abbrcode": "IN"
    }, {
      "hint": "Iowa",
      "abbrcode": "IA"
    }, {
      "hint": "Kansas",
      "abbrcode": "KS"
    }, {
      "hint": "Kentucky",
      "abbrcode": "KY"
    }, {
      "hint": "Louisiana",
      "abbrcode": "LA"
    }, {
      "hint": "Maine",
      "abbrcode": "ME"
    }, {
      "hint": "Manitoba",
      "abbrcode": "MB"
    }, {
      "hint": "Marshall Islands",
      "abbrcode": "MH"
    }, {
      "hint": "Maryland",
      "abbrcode": "MD"
    }, {
      "hint": "Massachusetts",
      "abbrcode": "MA"
    }, {
      "hint": "Michigan",
      "abbrcode": "MI"
    }, {
      "hint": "Minnesota",
      "abbrcode": "MN"
    }, {
      "hint": "Mississippi",
      "abbrcode": "MS"
    }, {
      "hint": "Missouri",
      "abbrcode": "MO"
    }, {
      "hint": "Montana",
      "abbrcode": "MT"
    }, {
      "hint": "Nebraska",
      "abbrcode": "NE"
    }, {
      "hint": "Nevada",
      "abbrcode": "NV"
    }, {
      "hint": "New Brunswick",
      "abbrcode": "NB"
    }, {
      "hint": "New Hampshire",
      "abbrcode": "NH"
    }, {
      "hint": "New Jersey",
      "abbrcode": "NJ"
    }, {
      "hint": "New Mexico",
      "abbrcode": "NM"
    }, {
      "hint": "New York",
      "abbrcode": "NY"
    }, {
      "hint": "Newfoundland and Labrador",
      "abbrcode": "NL"
    }, {
      "hint": "North Carolina",
      "abbrcode": "NC"
    }, {
      "hint": "North Dakota",
      "abbrcode": "ND"
    }, {
      "hint": "Northern Mariana Islands",
      "abbrcode": "MP"
    }, {
      "hint": "Nova Scotia",
      "abbrcode": "NS"
    }, {
      "hint": "Northwest Territories",
      "abbrcode": "NT"
    }, {
      "hint": "Nunavut",
      "abbrcode": "NU"
    }, {
      "hint": "Ohio",
      "abbrcode": "OH"
    }, {
      "hint": "Oklahoma",
      "abbrcode": "OK"
    }, {
      "hint": "Ontario",
      "abbrcode": "ON"
    }, {
      "hint": "Oregon",
      "abbrcode": "OR"
    }, {
      "hint": "Palau",
      "abbrcode": "PW"
    }, {
      "hint": "Pennsylvania",
      "abbrcode": "PA"
    }, {
      "hint": "Prince Edward Island",
      "abbrcode": "PE"
    }, {
      "hint": "Puerto Rico",
      "abbrcode": "PR"
    }, {
      "hint": "Quebec",
      "abbrcode": "QC"
    }, {
      "hint": "Rhode Island",
      "abbrcode": "RI"
    }, {
      "hint": "Saskatchewan",
      "abbrcode": "SK"
    }, {
      "hint": "South Carolina",
      "abbrcode": "SC"
    }, {
      "hint": "South Dakota",
      "abbrcode": "SD"
    }, {
      "hint": "Tennessee",
      "abbrcode": "TN"
    }, {
      "hint": "Texas",
      "abbrcode": "TX"
    }, {
      "hint": "Utah",
      "abbrcode": "UT"
    }, {
      "hint": "Vermont",
      "abbrcode": "VT"
    }, {
      "hint": "Virgin Islands",
      "abbrcode": "VI"
    }, {
      "hint": "Virginia",
      "abbrcode": "VA"
    }, {
      "hint": "Washington",
      "abbrcode": "WA"
    }, {
      "hint": "West Virginia",
      "abbrcode": "WV"
    }, {
      "hint": "Wisconsin",
      "abbrcode": "WI"
    }, {
      "hint": "Wyoming",
      "abbrcode": "WY"
    }, {
      "hint": "Yukon",
      "abbrcode": "YT"
    }]
  }
});

Note that I got the JSON list of states and provinces from wholypantalones (great moniker, primo!) here.

Shine, Waxing Platform (Framework?)!

In over twenty years of programming, I have for the most part tolerated (sometimes just barely) the particular technology I was working with (some of which (they shall remain nameless, but rhyme with "Hacktuate," "Mistr[i]al Reports" and "Windoze Bomb-packed Framework") were so painful to work with that I seriously considered changing professions).

On two occasions, though, I have been"head over heels" in love with a particular technology: The first time was with Delphi (Object Pascal) which, IMO, surpassed its peers in all ways except for market share and business acumen of some of those tasked with positioning that great language and conglomeration of tools. The second time (now) is with Meteor, a node.js-based, Isomorphic JavaScript extravaganza.

Meteor is a waxing (as opposed to waning - nothing to do with waxing of surfboards or skin) platform (or framework, depending on your POV) and, if you haven't yet, you owe it to yourself to, in the words of the inimitable and irrepressible Hoosier John Mellencamp, check it out.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder Across Time & Space
United States United States
I am in the process of morphing from a software developer into a portrayer of Mark Twain. My monologue (or one-man play, entitled "The Adventures of Mark Twain: As Told By Himself" and set in 1896) features Twain giving an overview of his life up till then. The performance includes the relating of interesting experiences and humorous anecdotes from Twain's boyhood and youth, his time as a riverboat pilot, his wild and woolly adventures in the Territory of Nevada and California, and experiences as a writer and world traveler, including recollections of meetings with many of the famous and powerful of the 19th century - royalty, business magnates, fellow authors, as well as intimate glimpses into his home life (his parents, siblings, wife, and children).

Peripatetic and picaresque, I have lived in eight states; specifically, besides my native California (where I was born and where I now again reside) in chronological order: New York, Montana, Alaska, Oklahoma, Wisconsin, Idaho, and Missouri.

I am also a writer of both fiction (for which I use a nom de plume, "Blackbird Crow Raven", as a nod to my Native American heritage - I am "½ Cowboy, ½ Indian") and nonfiction, including a two-volume social and cultural history of the U.S. which covers important events from 1620-2006: http://www.lulu.com/spotlight/blackbirdcraven

Comments and Discussions

 
GeneralMy vote of 5 Pin
Farhad Reza17-Nov-16 22:48
Farhad Reza17-Nov-16 22:48 
General[My vote of 1] Congratulations for conquering the select statement in Meteor Pin
Andreas Kroll22-Sep-15 1:50
Andreas Kroll22-Sep-15 1:50 
Sometimes I wonder why people do have the need to post stuff.

In your case you really have conquered the select statement of HTML and used a template in Meteor to use it.

If someone really needs to use this code as a template, he/she should stop programming at all.

Dude, I appreciate the time you take to produce an article, but please, please provide some CONTENT that is worth sharing.

Otherwise there will soon be people writing articles how they are using
in a template in Meteor.
Today is the tomorrow of yesterday...

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.