Country States Name List HTML Drop down Select

Country and state names drop down select. USA state list, Indian state list. copy paste states name drop down select code

Select a country name and then you will see the state's name

To create a drop-down list containing the state names of any country, select the country name and the list of states for that country will appear below.

The state list option value is state code. You have the option to switch from state code to state name here.

Select Country

Set option value states name

HTML

<!--- India states -->
<select id="country-state" name="country-state">
    <option value="">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>

Download state names drop down code

Download

Dynamic Country-Region Select Drop down

JavaScript Dynamic country state drop down select options. Here you can see the state names of the country of your choice without Ajax or API

Country

State

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"},...]
        ...
    }
}

Compress JSON code

Download Country-States JSON

Show country and state array

usage

// 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-region 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

<script src="./js/country-states.js"></script>

HTML

<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>

JavaScript

// 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();
})();

Download Full Code Zip file Try it Yourself

Report Problem