Country States Name List HTML Drop down Select
Country and state names drop down select. This page provides a comprehensive list of state names for all countries, available for both HTML dropdown selection and as a JavaScript state names array. It also includes dynamic country and state selection dropdown code in HTML and JavaScript. You can easily copy or download the code for your projects
Contents
States Name HTML Drop down Select
Which country's state names do you want, select the country name from below. Then you will see the HTML drop-down code below. You can copy or download this code.
The state list option value is state code. You have the option to switch from state code to state name here.
<!--- India states -->
<select id="states" name="states">
<option>Select state</option>
<option value="AN">Andaman and Nicobar Islands</option>
<option value="AP">Andhra Pradesh</option>
<option value="AR">Arunachal Pradesh</option>
<option value="AS">Assam</option>
<option value="BR">Bihar</option>
<option value="CH">Chandigarh</option>
<option value="CT">Chhattisgarh</option>
<option value="DN">Dadra and Nagar Haveli</option>
<option value="DD">Daman and Diu</option>
<option value="DL">Delhi</option>
<option value="GA">Goa</option>
<option value="GJ">Gujarat</option>
<option value="HR">Haryana</option>
<option value="HP">Himachal Pradesh</option>
<option value="JK">Jammu and Kashmir</option>
<option value="JH">Jharkhand</option>
<option value="KA">Karnataka</option>
<option value="KL">Kerala</option>
<option value="LA">Ladakh</option>
<option value="LD">Lakshadweep</option>
<option value="MP">Madhya Pradesh</option>
<option value="MH">Maharashtra</option>
<option value="MN">Manipur</option>
<option value="ML">Meghalaya</option>
<option value="MZ">Mizoram</option>
<option value="NL">Nagaland</option>
<option value="OR">Odisha</option>
<option value="PY">Puducherry</option>
<option value="PB">Punjab</option>
<option value="RJ">Rajasthan</option>
<option value="SK">Sikkim</option>
<option value="TN">Tamil Nadu</option>
<option value="TG">Telangana</option>
<option value="TR">Tripura</option>
<option value="UP">Uttar Pradesh</option>
<option value="UT">Uttarakhand</option>
<option value="WB">West Bengal</option>
</select>Dynamic Country And State Selection Drop down
JavaScript Dynamic country state drop down select options. Where the states dropdown is automatically updated based on the selected country without requiring any API or AJAX calls.
Here is an example of country and states array code. You need to download the country-region array list separately. Because it is a large file, it cannot be displayed here
Country States Code array Example Code:
const country_and_states = {
country: {
"IN": "India",
"US": "United States",
"AE": "United Arab Emirates"
...
},
states: {
"IN": [{"code":"DL","name":"Delhi"},...],
"US": [{"code":"WA","name":"Washington"},...],
"AE": [{"code":"DU","name":"Dubai"},...]
...
}
}// get all countries
const country = country_and_states.country
// array object {}
// Get country name by country code
let country_code = "IN";
let country_name = country_and_states.country[country_code];
// India
// Get country states by country code
let country_code = "IN";
const states = country_and_states.states[country_code];
// array [{"code":"DL","name":"Delhi"},...]HTML javaScript Code For Dynamic Select Country And State
Complete code for dynamically selecting country name and state name
HTML import script, country and state list array:
<div class="container p-3">
<div class="mb-3">
<label for="country" class="form-label">Country</label>
<select id="country" class="form-select">
<option>select country</option>
</select>
</div>
<div class="mb-3">
<label for="state" class="form-label">State</label>
<select id="state" class="form-select">
<option>_</option>
</select>
</div>
</div>// user country code for selected option
var user_country_code = "IN";
(() => {
// script https://www.html-code-generator.com/html/drop-down/state-name
// Get the country name and state name from the imported script.
const country_list = country_and_states.country;
const state_list = country_and_states.states;
const id_state_option = document.getElementById("state");
const id_country_option = document.getElementById("country");
const create_country_selection = () => {
let option = '';
option += '<option value="">select country</option>';
for (const country_code in country_list) {
// set selected option user country
let selected = (country_code == user_country_code) ? ' selected' : '';
option += '<option value="' + country_code + '"' + selected + '> '
+ country_list[country_code] + '</option>';
}
id_country_option.innerHTML = option;
};
const create_states_selection = () => {
// selected country code
let selected_country_code = id_country_option.value;
// get state names by selected country-code
let state_names = state_list[selected_country_code];
// if invalid country code
if (!state_names) {
id_state_option.innerHTML = '<option>select state</option>';
return;
}
// create option
let option = '';
option += '<option>select state</option>';
state_names.forEach(state => {
option += '<option value="' + state.code + '">' + state.name + '</option>';
});
id_state_option.innerHTML = option;
};
// country select change event update state code
id_country_option.addEventListener('change', create_states_selection);
create_country_selection();
create_states_selection();
})();JavaScript States Names Array
Download a comprehensive JavaScript array containing state names and codes for all countries, organized by country code.
Example Code
Below is a sample of the state names array. To access the complete code, click the download button below.
The object structure uses country codes as keys, with each key pointing to an array of state objects. Each state object includes the state's name and code:
{
"AF": [{"name":"Badakhshan","code":"BDS"},{"name":"Badghīs","code":"BDG"}, ...],
"AL": [{"name":"Berat","code":"01"},{"name":"Dibër","code":"09"}, ...],
"DZ": [{"name":"Adrar","code":"01"},{"name":"Alger","code":"16"}, ...],
"AD": [{"name":"Andorra la Vella","code":"07"},{"name":"Canillo","code":"02"}, ...],
"AO": [{"name":"Bengo","code":"BGO"},{"name":"Benguela","code":"BGU"}, ...],
...
}Usage Example
Here is how you can retrieve state names for a specific country using its country code:
// Get state names by country code
const country_code = "IN";
const states = statesArray[country_code];
// Result: [{"code": "DL", "name": "Delhi"}, ...]