How to Add USA States to a Dropdown With JavaScript
Quick Summary
- A plain JavaScript array of state names and abbreviations fills an empty select field with options on page load, with no library required.
- Each option displays the state name and submits its two-letter abbreviation, and the list also covers the District of Columbia and US territories.
- Load the script after the select field, because getElementById returns null if it runs before the field exists.
Typing out dozens of <option> tags for a US state dropdown is tedious and hard to maintain. This plain JavaScript snippet keeps the US states in an array and fills an empty <select> with them when the page loads. No library is needed.
Start with an empty select field that has the ID d-state:
<select id="d-state">
</select>The JavaScript
//DYNAMIC USA STATES
var usStates = [
{ name: 'Alabama', abbreviation: 'AL'},
{ name: 'Alaska', abbreviation: 'AK'},
{ name: 'American Samoa', abbreviation: 'AS'},
{ name: 'Arizona', abbreviation: 'AZ'},
{ name: 'Arkansas', abbreviation: 'AR'},
{ name: 'California', abbreviation: 'CA'},
{ name: 'Colorado', abbreviation: 'CO'},
{ name: 'Connecticut', abbreviation: 'CT'},
{ name: 'Delaware', abbreviation: 'DE'},
{ name: 'District Of Columbia', abbreviation: 'DC'},
{ name: 'Federated States Of Micronesia', abbreviation: 'FM'},
{ name: 'Florida', abbreviation: 'FL'},
{ name: 'Georgia', abbreviation: 'GA'},
{ name: 'Guam', abbreviation: 'GU'},
{ name: 'Hawaii', abbreviation: 'HI'},
{ name: 'Idaho', abbreviation: 'ID'},
{ name: 'Illinois', abbreviation: 'IL'},
{ name: 'Indiana', abbreviation: 'IN'},
{ name: 'Iowa', abbreviation: 'IA'},
{ name: 'Kansas', abbreviation: 'KS'},
{ name: 'Kentucky', abbreviation: 'KY'},
{ name: 'Louisiana', abbreviation: 'LA'},
{ name: 'Maine', abbreviation: 'ME'},
{ name: 'Marshall Islands', abbreviation: 'MH'},
{ name: 'Maryland', abbreviation: 'MD'},
{ name: 'Massachusetts', abbreviation: 'MA'},
{ name: 'Michigan', abbreviation: 'MI'},
{ name: 'Minnesota', abbreviation: 'MN'},
{ name: 'Mississippi', abbreviation: 'MS'},
{ name: 'Missouri', abbreviation: 'MO'},
{ name: 'Montana', abbreviation: 'MT'},
{ name: 'Nebraska', abbreviation: 'NE'},
{ name: 'Nevada', abbreviation: 'NV'},
{ name: 'New Hampshire', abbreviation: 'NH'},
{ name: 'New Jersey', abbreviation: 'NJ'},
{ name: 'New Mexico', abbreviation: 'NM'},
{ name: 'New York', abbreviation: 'NY'},
{ name: 'North Carolina', abbreviation: 'NC'},
{ name: 'North Dakota', abbreviation: 'ND'},
{ name: 'Northern Mariana Islands', abbreviation: 'MP'},
{ name: 'Ohio', abbreviation: 'OH'},
{ name: 'Oklahoma', abbreviation: 'OK'},
{ name: 'Oregon', abbreviation: 'OR'},
{ name: 'Palau', abbreviation: 'PW'},
{ name: 'Pennsylvania', abbreviation: 'PA'},
{ name: 'Puerto Rico', abbreviation: 'PR'},
{ name: 'Rhode Island', abbreviation: 'RI'},
{ name: 'South Carolina', abbreviation: 'SC'},
{ name: 'South Dakota', abbreviation: 'SD'},
{ name: 'Tennessee', abbreviation: 'TN'},
{ name: 'Texas', abbreviation: 'TX'},
{ name: 'Utah', abbreviation: 'UT'},
{ name: 'Vermont', abbreviation: 'VT'},
{ name: 'Virgin Islands', abbreviation: 'VI'},
{ name: 'Virginia', abbreviation: 'VA'},
{ name: 'Washington', abbreviation: 'WA'},
{ name: 'West Virginia', abbreviation: 'WV'},
{ name: 'Wisconsin', abbreviation: 'WI'},
{ name: 'Wyoming', abbreviation: 'WY' }
];
var stateSelect = document.getElementById('d-state');
for(var i = 0; i < usStates.length; i++) {
var option = document.createElement("option");
option.text = usStates[i].name;
option.value = usStates[i].abbreviation;
stateSelect.add(option);
}usStatesis an array of objects, each with anameand a two-letterabbreviation. Besides the 50 states, it includes the District of Columbia, US territories such as Guam, Puerto Rico and the Virgin Islands, and freely associated states such as Palau. Remove any entries you don’t need.document.getElementById('d-state')finds the select field. The loop creates an<option>for each entry withdocument.createElement(), uses the name as the visible text and the abbreviation as the value, then appends it withstateSelect.add().- When the form is submitted, the value sent is the abbreviation, for example
CA. To read it in JavaScript, use the select’svalueproperty, as in getting a form field’s value in JavaScript.
Load the script after the select field, for example at the end of the page. If it runs before the field exists, getElementById() returns null and the loop fails.
View it on JSFiddle
The first state in the list is selected by default. If you’d rather show a prompt such as Select a state, put that option inside the <select> in your HTML; add() appends the states after it.
Related articles
- removing specific states from the WooCommerce checkout: when WooCommerce builds the state list for you
