HTML select country region name

All Countries and states Drop Down List In HTML. USA state list, Indian state list. Copy paste states name drop down select code

HTML
<select id="country-state" name="country-state">
    <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>

Javascript Dynamic country, state drop down select options. No API no ajax

Country-Region Dropdown Menu Demo

Edit State Name
Country States Code JSON Example
{
    "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"},...]
        ...
    }
}
HTML
<script src="./js/country-states.js"></script>
HTML
<div>
<label for="country">Country</label>
<select id="country">
    <option>select country</option>
</select>
</div>

<div>
<label for="state">State</label>
<span id="state-code"><input type="text" id="state"></span>
</div>
JavaScript
(function () {
    //country code for selected option
    let user_country_code = "IN";

    let country_list = country_and_states['country'];
    let states_list = country_and_states['states'];

    // country name drop down
    let option =  '';
    option += '<option>select country</option>';
    for(let 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>';
    }
    document.getElementById('country').innerHTML = option;

    // state name drop down
    let text_box = '<input type="text" class="input-text" id="state">';
    let state_code_append_id = document.getElementById("state-code");

    function create_states_dropdown() {
        let country_code = document.getElementById("country").value;
        let states = states_list[country_code];
        // invalid country code or no states add textbox
        if(!states){
            state_code_append_id.innerHTML = text_box;
            return;
        }
        let option = '';
        if (states.length > 0) {
            option = '<select id="state">\n';
            for (let i = 0; i < states.length; i++) {
                option += '<option value="'+states[i].code+'">'+states[i].name+'</option>';
            }
            option += '</select>';
        } else {
            // create input textbox if no states 
            option = text_box
        }
        state_code_append_id.innerHTML = option;
    }

    // country change event
    const country_select = document.getElementById("country");
    country_select.addEventListener('change', create_states_dropdown);

    create_states_dropdown();
})();
Add Remove Edit Country Name
×
Country Code
Country Name
    Add Remove Edit State Name
    ×
    State Code
    State Name
      Add Remove Edit State Name
      ×
      State Code
      State Name