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

If you want a drop-down list of the names of the states of any country, select the country name and then you will see the names of all the states of that country below.

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


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 
// object {}

// get country-region using country code
let country_code = "IN";
const india_states = country_and_states.states[country_code]; 
// array []

HTML javaScript code for dynamic select country and state

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_array = country_and_states.country;
    const states_array = country_and_states.states;

    const id_state_option = document.getElementById("state");
    const id_country_option = document.getElementById("country");

    const createCountryNamesDropdown = () => {
        let option =  '';
        option += '<option value="">select country</option>';

        for(let country_code in country_array){
            // set selected option user country
            let selected = (country_code == user_country_code) ? ' selected' : '';
            option += '<option value="'+country_code+'"'+selected+'>'+country_array[country_code]+'</option>';
        }
        id_country_option.innerHTML = option;
    };

    const createStatesNamesDropdown = () => {
        let selected_country_code = id_country_option.value;
        // get state names
        let state_names = states_array[selected_country_code];

        // if invalid country code
        if(!state_names){
            id_state_option.innerHTML = '<option>select state</option>';
            return;
        }
        let option = '';
        option += '<select id="state">';
        option += '<option>select state</option>';
        for (let i = 0; i < state_names.length; i++) {
            option += '<option value="'+state_names[i].code+'">'+state_names[i].name+'</option>';
        }
        option += '</select>';
        id_state_option.innerHTML = option;
    };

    // country select change event
    id_country_option.addEventListener('change', createStatesNamesDropdown);

    createCountryNamesDropdown();
    createStatesNamesDropdown();
})();

Download Full Code Zip file Try it Yourself

Report Problem