State Name 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 the name of the country from which you want to create a state drop-down list.

Country

Set option value states name

Edit States name

HTML

<!--- India states -->
<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>

Dynamic Country-Region Drop down Menu

JavaScript Dynamic country, state drop down select options. Without API or Ajax

Country

State

Here you can edit add or remove country, state names before downloading the script.

Edit country name

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 import script, country and state list

<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

// user country code for selected option
let user_country_code = "IN";

(function () {
    // script https://www.html-code-generator.com/html/drop-down/country-region

    // Get the country name and state name from the imported script.
    let country_list = country_and_states['country'];
    let states_list = country_and_states['states'];

    // creating 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;

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

    function create_states_dropdown() {
        // get selected country code
        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_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_id.innerHTML = option;
    }

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

    create_states_dropdown();
})();