My technical meanderings and other nonsense. Published since 2002. No, really. I'm *that* internet-old. I remember the days of Greymatter.
Total blog posts published since 2002: 2,087. Here was the first. And a random one from half-way back. You can find me blathering on App.net also. Sorry to bother you with all that. You can move on with your day now.
Drop-down list of United States, Canada, and Mexico states or provinces
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:
36 thoughts on “Drop-down list of United States, Canada, and Mexico states or provinces”
Forgot a province.
Yukon
great stuff and very handy! it might also be useful to separate the u.s. states and canadian provinces using the
i see this strips element tags – the above should read optgroup element
Yes, optgroup is a good idea. Thanks…
This is a lifesaver. Thanks!!
Shouldn’t DC be grouped with the US states?
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.
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.
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.
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.
You saved me lots of time. Thank you soo much
You just saved me a lot of typing. Thanks!
Nice thanks a lot for the list!!!
This help me very much. Thank you very much
This is what the Internet is (supposed to be) about.
I looked for it, I found it!
Thank you for sharing.
thanks
I’m new web developing and this was a huge time saver, I appreciate you thinking about others.
Thank you so much for this! Your a time/life-saver!!!!
thanks dude.
great + cheers from berlin!
Great list, thanks – you misspelled “Pennsylvania”
This is very helpful thanks a ton
Thanks for sharing your work with everybody!
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
Thanks a lot for putting your work out here and saving us so much work!
Great Stuff Matt, Really useful
Cheers
Darshana
u r a lifesaver.. good looks man.. couldn’t have made the deadline without this..
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..
Thank you very much for this,your a life saver
Great find… I am gonna bookmark it…
Thanks!
Yes, thanks!!
Saved me a bunch of time at work. Only one I found that utilizes the optgroup tag. Thanks a lot!
Thanks for the time saver – although “Pennyslvania” is still spelled wrong.
Thank You, it’s a very good finding one
Thanks a lot, great post, using it now.
Here’s a PHP function that generates the dropdown with the desired province code pre-selected. It uses an inlineIf function that you’ll also need. The $selectedid is the province code that will be selected when the dropdown is rendered. The $attributes parameter can be anything you want but should probably at least be an id, name and onchange function call; eg: “id=provincecode name=provincecode onchange=dirty()”.
Forgot a province.
Yukon
great stuff and very handy! it might also be useful to separate the u.s. states and canadian provinces using the
i see this strips element tags – the above should read optgroup element
Yes, optgroup is a good idea. Thanks…
This is a lifesaver. Thanks!!
Shouldn’t DC be grouped with the US states?
OK I’ve made the following changes, based on feedback:
<optgroup>elements to separate “United States” from “Canada.”Thanks for the feedback. Let me know how I can improve it further, in order to make it easier for developers.
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.
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.
UPDATE: Mexico states are now included in the list. I also modified the
idattribute 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.
You saved me lots of time. Thank you soo much
You just saved me a lot of typing. Thanks!
Nice thanks a lot for the list!!!
This help me very much. Thank you very much
This is what the Internet is (supposed to be) about.
I looked for it, I found it!
Thank you for sharing.
thanks
I’m new web developing and this was a huge time saver, I appreciate you thinking about others.
Thank you so much for this! Your a time/life-saver!!!!
thanks dude.
great + cheers from berlin!
Great list, thanks – you misspelled “Pennsylvania”
This is very helpful thanks a ton
Thanks for sharing your work with everybody!
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
Thanks a lot for putting your work out here and saving us so much work!
Great Stuff Matt, Really useful
Cheers
Darshana
u r a lifesaver.. good looks man.. couldn’t have made the deadline without this..
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..
Thank you very much for this,your a life saver
Great find… I am gonna bookmark it…
Thanks!
Yes, thanks!!
Saved me a bunch of time at work. Only one I found that utilizes the optgroup tag. Thanks a lot!
Thanks for the time saver – although “Pennyslvania” is still spelled wrong.
Thank You, it’s a very good finding one
Thanks a lot, great post, using it now.
Here’s a PHP function that generates the dropdown with the desired province code pre-selected. It uses an inlineIf function that you’ll also need. The $selectedid is the province code that will be selected when the dropdown is rendered. The $attributes parameter can be anything you want but should probably at least be an id, name and onchange function call; eg: “id=provincecode name=provincecode onchange=dirty()”.
function inlineIf($a,$b,$c,$d){ $result = ($a == $b) ? $c : $d; return $result; } function getProvinceCodes($selectedid,$attributes){ $dropdown = "<select ".$attributes.">"; $dropdown .= "<optgroup label='Canada'>"; $dropdown .= "<option value='AB' ".inlineIf($selectedid,"AB","selected","")." title='Alberta'>AB</option>"; $dropdown .= "<option value='BC' ".inlineIf($selectedid,"BC","selected","")." title='British Columbia'>BC</option>"; $dropdown .= "<option value='MB' ".inlineIf($selectedid,"MB","selected","")." title='Manitoba'>MB</option>"; $dropdown .= "<option value='NL' ".inlineIf($selectedid,"NL","selected","")." title='Newfoundland & Labrador'>NL</option>"; $dropdown .= "<option value='NT' ".inlineIf($selectedid,"NT","selected","")." title='North West Territories'>NT</option>"; $dropdown .= "<option value='NS' ".inlineIf($selectedid,"NS","selected","")." title='Nova Scotia'>NS</option>"; $dropdown .= "<option value='NU' ".inlineIf($selectedid,"NU","selected","")." title='Nunavut'>NU</option>"; $dropdown .= "<option value='PE' ".inlineIf($selectedid,"PE","selected","")." title='Prince Edward Island'>PE</option>"; $dropdown .= "<option value='SK' ".inlineIf($selectedid,"SK","selected","")." title='Saskatchewan'>SK</option>"; $dropdown .= "<option value='ON' ".inlineIf($selectedid,"ON","selected","")." title='Ontario'>ON</option>"; $dropdown .= "<option value='QC' ".inlineIf($selectedid,"QC","selected","")." title='Quebec'>QC</option>"; $dropdown .= "<option value='YT' ".inlineIf($selectedid,"YT","selected","")." title='Yukon Territory'>YT</option>"; $dropdown .= "</optgroup>"; $dropdown .= "<optgroup label='USA'>"; $dropdown .= "<option value='AL' ".inlineIf($selectedid,"AL","selected","")." title='Alabama'>AL</option>"; $dropdown .= "<option value='AK' ".inlineIf($selectedid,"AK","selected","")." title='Alaska'>AK</option>"; $dropdown .= "<option value='AZ' ".inlineIf($selectedid,"AZ","selected","")." title='Arizona'>AZ</option>"; $dropdown .= "<option value='AR' ".inlineIf($selectedid,"AR","selected","")." title='Arkansas'>AR</option>"; $dropdown .= "<option value='CA' ".inlineIf($selectedid,"CA","selected","")." title='California'>CA</option>"; $dropdown .= "<option value='CO' ".inlineIf($selectedid,"CO","selected","")." title='Colorado'>CO</option>"; $dropdown .= "<option value='CT' ".inlineIf($selectedid,"CT","selected","")." title='Connecticut'>CT</option>"; $dropdown .= "<option value='DE' ".inlineIf($selectedid,"DE","selected","")." title='Delaware'>DE</option>"; $dropdown .= "<option value='DC' ".inlineIf($selectedid,"DC","selected","")." title='District of Columbia'>DC</option>"; $dropdown .= "<option value='FL' ".inlineIf($selectedid,"FL","selected","")." title='Florida'>FL</option>"; $dropdown .= "<option value='GA' ".inlineIf($selectedid,"GA","selected","")." title='Georgia'>GA</option>"; $dropdown .= "<option value='GU' ".inlineIf($selectedid,"GU","selected","")." title='Guam'>GU</option>"; $dropdown .= "<option value='HI' ".inlineIf($selectedid,"HI","selected","")." title='Hawaii'>HI</option>"; $dropdown .= "<option value='ID' ".inlineIf($selectedid,"ID","selected","")." title='Idaho'>ID</option>"; $dropdown .= "<option value='IL' ".inlineIf($selectedid,"IL","selected","")." title='Illinois'>IL</option>"; $dropdown .= "<option value='IN' ".inlineIf($selectedid,"IN","selected","")." title='Indiana'>IN</option>"; $dropdown .= "<option value='IA' ".inlineIf($selectedid,"IA","selected","")." title='Iowa'>IA</option>"; $dropdown .= "<option value='KS' ".inlineIf($selectedid,"KS","selected","")." title='Kansas'>KS</option>"; $dropdown .= "<option value='KY' ".inlineIf($selectedid,"KY","selected","")." title='Kentucky'>KY</option>"; $dropdown .= "<option value='LA' ".inlineIf($selectedid,"LA","selected","")." title='Louisiana'>LA</option>"; $dropdown .= "<option value='ME' ".inlineIf($selectedid,"ME","selected","")." title='Maine'>ME</option>"; $dropdown .= "<option value='MD' ".inlineIf($selectedid,"MD","selected","")." title='Maryland'>MD</option>"; $dropdown .= "<option value='MA' ".inlineIf($selectedid,"MA","selected","")." title='Massachusetts'>MA</option>"; $dropdown .= "<option value='MI' ".inlineIf($selectedid,"MI","selected","")." title='Michigan'>MI</option>"; $dropdown .= "<option value='MN' ".inlineIf($selectedid,"MN","selected","")." title='Minnesota'>MN</option>"; $dropdown .= "<option value='MS' ".inlineIf($selectedid,"MS","selected","")." title='Mississippi'>MS</option>"; $dropdown .= "<option value='MO' ".inlineIf($selectedid,"MO","selected","")." title='Missouri'>MO</option>"; $dropdown .= "<option value='MT' ".inlineIf($selectedid,"MT","selected","")." title='Montana'>MT</option>"; $dropdown .= "<option value='NE' ".inlineIf($selectedid,"NE","selected","")." title='Nebraska'>NE</option>"; $dropdown .= "<option value='NV' ".inlineIf($selectedid,"NV","selected","")." title='Nevada'>NV</option>"; $dropdown .= "<option value='NH' ".inlineIf($selectedid,"NH","selected","")." title='New Hampshire'>NH</option>"; $dropdown .= "<option value='NJ' ".inlineIf($selectedid,"NJ","selected","")." title='New Jersey'>NJ</option>"; $dropdown .= "<option value='NM' ".inlineIf($selectedid,"NM","selected","")." title='New Mexico'>NM</option>"; $dropdown .= "<option value='NY' ".inlineIf($selectedid,"NY","selected","")." title='New York'>NY</option>"; $dropdown .= "<option value='NC' ".inlineIf($selectedid,"NC","selected","")." title='North Carolina'>NC</option>"; $dropdown .= "<option value='ND' ".inlineIf($selectedid,"ND","selected","")." title='North Dakota'>ND</option>"; $dropdown .= "<option value='OH' ".inlineIf($selectedid,"OH","selected","")." title='Ohio'>OH</option>"; $dropdown .= "<option value='OK' ".inlineIf($selectedid,"OK","selected","")." title='Oklahoma'>OK</option>"; $dropdown .= "<option value='OR' ".inlineIf($selectedid,"OR","selected","")." title='Oregon'>OR</option>"; $dropdown .= "<option value='PA' ".inlineIf($selectedid,"PA","selected","")." title='Pennsylvania'>PA</option>"; $dropdown .= "<option value='PR' ".inlineIf($selectedid,"PR","selected","")." title='Puerto Rico'>PR</option>"; $dropdown .= "<option value='RI' ".inlineIf($selectedid,"RI","selected","")." title='Rhode Island'>RI</option>"; $dropdown .= "<option value='SC' ".inlineIf($selectedid,"SC","selected","")." title='South Carolina'>SC</option>"; $dropdown .= "<option value='SD' ".inlineIf($selectedid,"SD","selected","")." title='South Dakota'>SD</option>"; $dropdown .= "<option value='TN' ".inlineIf($selectedid,"TN","selected","")." title='Tennessee'>TN</option>"; $dropdown .= "<option value='TX' ".inlineIf($selectedid,"TX","selected","")." title='Texas'>TX</option>"; $dropdown .= "<option value='UT' ".inlineIf($selectedid,"UT","selected","")." title='Utah'>UT</option>"; $dropdown .= "<option value='VT' ".inlineIf($selectedid,"VT","selected","")." title='Vermont'>VT</option>"; $dropdown .= "<option value='VA' ".inlineIf($selectedid,"VA","selected","")." title='Virginia'>VA</option>"; $dropdown .= "<option value='VI' ".inlineIf($selectedid,"VI","selected","")." title='Virgin Islands'>VI</option>"; $dropdown .= "<option value='WA' ".inlineIf($selectedid,"WA","selected","")." title='Washington'>WA</option>"; $dropdown .= "<option value='WV' ".inlineIf($selectedid,"WV","selected","")." title='West Virginia'>WV</option>"; $dropdown .= "<option value='WI' ".inlineIf($selectedid,"WI","selected","")." title='Wisconsin'>WI</option>"; $dropdown .= "<option value='WY' ".inlineIf($selectedid,"WY","selected","")." title='Wyoming'>WY</option>"; $dropdown .= "</optgroup>"; $dropdown .= "</select>"; return $dropdown; }