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

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>

Categories: Code

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info Name: Email (will not show on page):

Follow new comments via email? (You can turn this off any time)

Do you want your comments emailed to yourself?

Home Page (optional):

Forgot a province. Yukon ... Read more.

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

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

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

This is a lifesaver. Thanks!! ... Read more.

Shouldn't DC be grouped with the US states? ... Read more.

OK I've made the following changes, based on feedback: Added Yukon territory. Added <optgroup> elements t ... Read more.

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 co ... Read more.

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. ... Read more.

UPDATE: Mexico states are now included in the list. I also modified the id attribute to be preceded with the three letter country code ... Read more.

You saved me lots of time. Thank you soo much ... Read more.

You just saved me a lot of typing. Thanks! ... Read more.

Nice thanks a lot for the list!!! ... Read more.

This help me very much. Thank you very much ... Read more.

This is what the Internet is (supposed to be) about. I looked for it, I found it! Thank you for sharing. ... Read more.

thanks ... Read more.

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

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

thanks dude. ... Read more.

great + cheers from berlin! ... Read more.

Great list, thanks - you misspelled "Pennsylvania" ... Read more.

This is very helpful thanks a ton ... Read more.

Thanks for sharing your work with everybody! ... Read more.

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.

Contact Matt

Similar Entries

AJAX select list issue in IE6 (362 recent visits)
DHTML select list trouble, continued (250 recent visits)
To-Do list and task manager web sites (254 recent visits)
Removing static blogroll list (6 recent visits)
Christmas list mediator (8 recent visits)
Ordered list scenarios (93 recent visits)

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

Add Feedback (view all)

Leave feedback

Similar Entries

Stats

Recent Referrers (click)

Syndicate

Advertisements