javascript dynamic drop down list country state city

Today, We want to share with you country state city dropdown javascript.In this post we will show you how to populate state dropdown based on option selected in country dropdown using jquery?, hear for Show district list as per country and state select in dropdown select box Javascript we will give you demo and example for implement.In this post, we will learn about populate Cascading A DropDownList with group options with an example.

Cascading Dependent Dropdown Country, State, City Using JavaScript

index.html

Choose Country: 
Choose Country





Choose State: 
Please select Country user





Choose District: 
Please select State

country state city drop down list using javascript

In JavaScript, you can create a dynamic drop-down list for country, state, and city using an array of objects containing the required data. Here is an example code to create a dynamic drop-down list for country, state, and city:

Select Country:

  Select Country



Select State:

  Select State



Select City:

  Select City

// JavaScript Code
const data = [
  {
    country: "USA",
    states: [
      {
        state: "California",
        cities: ["Los Angeles", "San Francisco", "San Diego"]
      },
      {
        state: "Texas",
        cities: ["Houston", "Dallas", "Austin"]
      }
    ]
  },
  {
    country: "India",
    states: [
      {
        state: "Maharashtra",
        cities: ["Mumbai", "Pune", "Nagpur"]
      },
      {
        state: "Karnataka",
        cities: ["Bangalore", "Mysore", "Mangalore"]
      }
    ]
  }
];

// Function to populate country drop-down list
function populateCountry() {
  const countryList = document.getElementById("country");
  data.forEach(function(item) {
    const option = document.createElement("option");
    option.text = item.country;
    option.value = item.country;
    countryList.add(option);
  });
}

// Function to populate state drop-down list
function changeCountry() {
  const stateList = document.getElementById("state");
  const cityList = document.getElementById("city");
  const selectedCountry = document.getElementById("country").value;
  stateList.innerHTML = "Select State";
  cityList.innerHTML = "Select City";
  if (selectedCountry !== "") {
    const countryData = data.find(item => item.country === selectedCountry);
    if (countryData) {
      countryData.states.forEach(function(item) {
        const option = document.createElement("option");
        option.text = item.state;
        option.value = item.state;
        stateList.add(option);
      });
    }
  }
}

// Function to populate city drop-down list
function changeState() {
  const cityList = document.getElementById("city");
  const selectedCountry = document.getElementById("country").value;
  const selectedState = document.getElementById("state").value;
  cityList.innerHTML = "Select City";
  if (selectedCountry !== "" && selectedState !== "") {
    const countryData = data.find(item => item.country === selectedCountry);
    if (countryData) {
      const stateData = countryData.states.find(item => item.state === selectedState);
      if (stateData) {
        stateData.cities.forEach(function(item) {
          const option = document.createElement("option");
          option.text = item;
          option.value = item;
          cityList.add(option);
        });
      }
    }
  }
}

// Call the populateCountry() function to initialize the country drop-down list
populateCountry();

In the above code, we have an array of objects called data that contains information about countries, states, and cities. We then have three functions - populateCountry(), changeCountry(), and changeState() - to populate the drop-down lists for country, state, and city.

I hope you get an idea about state drop down list in html.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.