Drop-down list of United States, Canada, and Mexico states or provinces

July 4, 2006 / Filed under: Code

Since I’m always searching for this, when the need arises - I’d thought I’d post it here, so I can always find it easily.

This is for web developers, who quickly need to add a "drop down" list of all the U.S. states, Mexican states, and the provinces in Canada, for a web form.

All you have to do is copy/paste this code into your site.

It’s viewable as the full name of the state/province, but the value is just the two-letter abbreviation. It also includes an id attribute for each, with the attribute value being the two-letter abbreviation. This is for when you need to use JavaScript to pre-select a particular option value.

Here’s what the drop-down looks like:

And here’s the actual HTML:

<select>

    <option></option>

    <optgroup label="United States">
     
        <option id="USA-AL" value="AL">Alabama (AL)</option>
        <option id="USA-AK" value="AK">Alaska (AK)</option>
        <option id="USA-AZ" value="AZ">Arizona (AZ)</option>
        <option id="USA-AR" value="AR">Arkansas (AR)</option>             
        <option id="USA-CA" value="CA">California (CA)</option>
        <option id="USA-CO" value="CO">Colorado (CO)</option>
        <option id="USA-CT" value="CT">Connecticut (CT)</option>
        <option id="USA-DE" value="DE">Delaware (DE)</option>
        <option id="USA-DC" value="DC">District of Columbia (DC)</option>    
        <option id="USA-FL" value="FL">Florida (FL)</option>
        <option id="USA-GA" value="GA">Georgia (GA)</option>
        <option id="USA-GU" value="GU">Guam (GU)</option>
        <option id="USA-HI" value="HI">Hawaii (HI)</option>
        <option id="USA-ID" value="ID">Idaho (ID)</option>
        <option id="USA-IL" value="IL">Illinois (IL)</option>
        <option id="USA-IN" value="IN">Indiana (IN)</option>
        <option id="USA-IA" value="IA">Iowa (IA)</option>
        <option id="USA-KS" value="KS">Kansas (KS)</option>
        <option id="USA-KY" value="KY">Kentucky (KY)</option>
        <option id="USA-LA" value="LA">Louisiana (LA)</option>
        <option id="USA-ME" value="ME">Maine (ME)</option>
        <option id="USA-MD" value="MD">Maryland (MD)</option>
        <option id="USA-MA" value="MA">Massachusetts (MA)</option>
        <option id="USA-MI" value="MI">Michigan (MI)</option>
        <option id="USA-MN" value="MN">Minnesota (MN)</option>
        <option id="USA-MS" value="MS">Mississippi (MS)</option>
        <option id="USA-MO" value="MO">Missouri (MO)</option>
        <option id="USA-MT" value="MT">Montana (MT)</option>
        <option id="USA-NE" value="NE">Nebraska (NE)</option>
        <option id="USA-NV" value="NV">Nevada (NV)</option>
        <option id="USA-NH" value="NH">New Hampshire (NH)</option>
        <option id="USA-NJ" value="NJ">New Jersey (NJ)</option>
        <option id="USA-NM" value="NM">New Mexico (NM)</option>
        <option id="USA-NY" value="NY">New York (NY)</option>
        <option id="USA-NC" value="NC">North Carolina (NC)</option>
        <option id="USA-ND" value="ND">North Dakota (ND)</option>
        <option id="USA-OH" value="OH">Ohio (OH)</option>
        <option id="USA-OK" value="OK">Oklahoma (OK)</option>
        <option id="USA-OR" value="OR">Oregon (OR)</option>
        <option id="USA-PA" value="PA">Pennyslvania (PA)</option>
        <option id="USA-PR" value="PR">Puerto Rico (PR)</option>
        <option id="USA-RI" value="RI">Rhode Island (RI)</option>
        <option id="USA-SC" value="SC">South Carolina (SC)</option>
        <option id="USA-SD" value="SD">South Dakota (SD)</option>
        <option id="USA-TN" value="TN">Tennessee (TN)</option>
        <option id="USA-TX" value="TX">Texas (TX)</option>
        <option id="USA-UT" value="UT">Utah (UT)</option>
        <option id="USA-VT" value="VT">Vermont (VT)</option>
        <option id="USA-VA" value="VA">Virginia (VA)</option>
        <option id="USA-VI" value="VI">Virgin Islands (VI)</option>
        <option id="USA-WA" value="WA">Washington (WA)</option>
        <option id="USA-WV" value="WV">West Virginia (WV)</option>
        <option id="USA-WI" value="WI">Wisconsin (WI)</option>
        <option id="USA-WY" value="WY">Wyoming (WY)</option>
      
    </optgroup>
   
    <optgroup label="Canada">
   
        <option id="CAN-AB" value="AB">Alberta (AB)</option>
        <option id="CAN-BC" value="BC">British Columbia (BC)</option>
        <option id="CAN-MB" value="MB">Manitoba (MB)</option>
        <option id="CAN-NB" value="NB">New Brunswick (NB)</option>
        <option id="CAN-NL" value="NL">Newfoundland and Labrador (NL)</option>
        <option id="CAN-NT" value="NT">Northwest Territories (NT)</option>
        <option id="CAN-NS" value="NS">Nova Scotia (NS)</option>
        <option id="CAN-NU" value="NU">Nunavut (NU)</option>
        <option id="CAN-PE" value="PE">Prince Edward Island (PE)</option>
        <option id="CAN-SK" value="SK">Saskatchewan (SK)</option>
        <option id="CAN-ON" value="ON">Ontario (ON)</option>
        <option id="CAN-QC" value="QC">Quebec (QC)</option>
        <option id="CAN-YT" value="YT">Yukon (YT)</option>
      
    </optgroup>
   
    <optgroup label="Mexico">
      
        <option id="MEX-AGS" value="AGS">Aguascalientes (AGS)</option>
        <option id="MEX-BCN" value="BCN">Baja California Norte (BCN)</option>
        <option id="MEX-BCS" value="BCS">Baja California Sur (BCS)</option>
        <option id="MEX-CAM" value="CAM">Campeche (CAM)</option>
        <option id="MEX-CHIS" value="CHIS">Chiapas (CHIS)</option>
        <option id="MEX-CHIH" value="CHIH">Chihuahua (CHIH)</option>
        <option id="MEX-COAH" value="COAH">Coahuila (COAH)</option>
        <option id="MEX-COL" value="COL">Colima (COL)</option>
        <option id="MEX-DF" value="DF">Distrito Federal (DF)</option>
        <option id="MEX-DGO" value="DGO">Durango (DGO)</option>
        <option id="MEX-GTO" value="GTO">Guanajuato (GTO)</option>
        <option id="MEX-GRO" value="GRO">Guerrero (GRO)</option>
        <option id="MEX-HGO" value="HGO">Hidalgo (HGO)</option>
        <option id="MEX-JAL" value="JAL">Jalisco (JAL)</option>
        <option id="MEX-EDM" value="EDM">México - Estado de (EDM)</option>
        <option id="MEX-MICH" value="MICH">Michoacán (MICH)</option>
        <option id="MEX-MOR" value="MOR">Morelos (MOR)</option>
        <option id="MEX-NAY" value="NAY">Nayarit (NAY)</option>
        <option id="MEX-NL" value="NL">Nuevo León (NL)</option>
        <option id="MEX-OAX" value="OAX">Oaxaca (OAX)</option>
        <option id="MEX-PUE" value="PUE">Puebla (PUE)</option>
        <option id="MEX-QRO" value="QRO">Querétaro (QRO)</option>
        <option id="MEX-QROO" value="QROO">Quintana Roo (QROO)</option>
        <option id="MEX-SLP" value="SLP">San Luis Potosí (SLP)</option>
        <option id="MEX-SIN" value="SIN">Sinaloa (SIN)</option>
        <option id="MEX-SON" value="SON">Sonora (SON)</option>
        <option id="MEX-TAB" value="TAB">Tabasco (TAB)</option>
        <option id="MEX-TAMPS" value="TAMPS">Tamaulipas (TAMPS)</option>
        <option id="MEX-TLAX" value="TLAX">Tlaxcala (TLAX)</option>
        <option id="MEX-VER" value="VER">Veracruz (VER)</option>
        <option id="MEX-YUC" value="YUC">Yucatán (YUC)</option>
        <option id="MEX-ZAC" value="ZAC">Zacatecas (ZAC)</option>
      
    </optgroup>
   
</select>

Comments/Mentions

# Ken at 7/17/2006 2:56 pm cst

Forgot a province.

Yukon

# James at 10/26/2006 7:21 pm cst

great stuff and very handy! it might also be useful to separate the u.s. states and canadian provinces using the element.

# James at 10/26/2006 7:22 pm cst

i see this strips element tags - the above should read optgroup element

# Matthom at 10/27/2006 4:07 am cst

Yes, optgroup is a good idea. Thanks...

# Lon at 4/25/2007 11:54 am cst

This is a lifesaver. Thanks!!

# Pat at 4/25/2007 12:31 pm cst

Shouldn't DC be grouped with the US states?

# Matthom at 4/25/2007 1:54 pm cst

OK I've made the following changes, based on feedback:

  • Added Yukon territory.
  • Added <optgroup> elements to separate "United States" from "Canada."
  • Moved "District of Columbia" to the United States category, where it belongs.
  • Added the abbreviation to the display [ie: Hawaii (HI)], since some users like to search based on the abbreviation.

Thanks for the feedback. Let me know how I can improve it further, in order to make it easier for developers.

# nathaniel at 5/15/2007 11:22 am cst

I am using a similar list, although not as nicely laid out with Optgroup. I recently had an enquiry about adding state/province values for other countries and I found your blog while goodling for such a list. Is this a request you have ever had before? I'm not even sure which countries have postal sub entities that would be equivalent to US states and Canadian provinces.

# Matthom at 5/15/2007 1:02 pm cst

Nathaniel, I haven't had that request yet. I'm not sure how other countries/regions handle postal codes. I'd be curious to know though.

# Matthom at 6/4/2007 2:32 pm cst

UPDATE: Mexico states are now included in the list. I also modified the id attribute to be preceded with the three letter country code, since some of the state codes are duplicated in other countries:

id="MEX-EDM"

The only duplication I noticed so far is "NL," which is used in both Canada and Mexico.

Another thing I noticed is that Mexico codes are inconsistent. Depending on what source you're looking at, sometimes a state has a two-letter abbreviation, and sometimes more.

Please leave a comment if you notice any mistakes.

# Prateek at 8/14/2007 2:59 pm cst

You saved me lots of time. Thank you soo much

# Nathaniel Brooks at 9/18/2007 10:00 am cst

You just saved me a lot of typing. Thanks!

# Julian at 10/4/2007 9:23 am cst

Nice thanks a lot for the list!!!

# Dixon MD at 11/28/2007 2:46 pm cst

This help me very much. Thank you very much

# Paul at 1/10/2008 3:49 am cst

This is what the Internet is (supposed to be) about.

I looked for it, I found it!

Thank you for sharing.

# wfd at 1/16/2008 6:42 am cst

thanks

# Timothy Reaves at 1/30/2008 5:50 pm cst

I'm new web developing and this was a huge time saver, I appreciate you thinking about others.

# Nick at 4/1/2008 5:12 pm cst

Thank you so much for this! Your a time/life-saver!!!!

# Web Developer at 4/16/2008 12:26 pm cst

thanks dude.

# akeem at 6/27/2008 1:06 am cst

great + cheers from berlin!

# Scott Vandehey at 7/9/2008 9:40 am cst

Great list, thanks - you misspelled "Pennsylvania"

# Betti at 10/13/2008 10:01 pm cst

This is very helpful thanks a ton

# Chellie at 11/10/2008 5:28 pm cst

Thanks for sharing your work with everybody!

# JilMac at 12/8/2008 5:52 pm cst

Hi Matt:

I'm an instructor for CCV - Community College of Vermont. I shared your site with my JavaScript students.

We would like to thank you for writing such Clear Directions.

Greetings & Happy Holidays JilMac & Students

# Daniel R. Ziegler at 2/16/2009 9:23 am cst

Thanks a lot for putting your work out here and saving us so much work!

# Darshana at 2/27/2009 9:24 pm cst

Great Stuff Matt, Really useful

Cheers Darshana

# agniva at 3/1/2009 5:47 pm cst

u r a lifesaver.. good looks man.. couldn't have made the deadline without this..

# tom at 4/24/2009 10:34 pm cst

Hey Matt,

Its been a long week and working between 2 different computers... Thank you for the list. You saved me a lot of typing..

# bert gatchalian at 8/25/2009 7:52 am cst

Thank you very much for this,your a life saver

# Michael at 9/29/2009 1:57 pm cst

Great find... I am gonna bookmark it... Thanks!

# MMapes at 2/15/2010 2:03 pm cst

Yes, thanks!!