Create Country State City Zip code Drop Down List using Javascript

In this tutorial you will learn how to create a Country State City Zip code Drop Down List using Javascript

Source Code

Starter Code for HTML

Start the project by creating a index.html file and include the code from down below in your file.

The html file contain

<h1>Select Country State City Zip</h1>
    <form class="dropdown-group">
      <select id="Country" size="1">
        <option value="" selected="selected">-- Select Country --</option>
      </select>

      <select id="State" size="1">
        <option value="" selected="selected">-- Select State --</option>
      </select>

      <select id="City" size="1">
        <option value="" selected="selected">-- Select City --</option>
      </select>

      <select id="Zip" size="1">
        <option value="" selected="selected">-- Select Zip --</option>
      </select>
    </form>

CSS Style code

* {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}
h1 {
  margin-top: 4rem;
  text-align: center;
}
body {
  background-color: #fafafa;
}
.dropdown-group {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: auto;
  margin-top: 3rem;
}

select {
  width: 100%;
  min-width: 15ch;
  max-width: 30ch;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.1;
  background-color: #fff;
  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

Data base

Create a JavaScript file and call it main.js

Here is where your entier logic for the project will live.

// Todo: Create a function that loads the country, state, city, zip

var countryStateInfo = {
  USA: {
    California: {
      "Los Angeles": ["90001", "90002", "90003", "90004"],
      "San Diego": ["92093", "92101"],
    },
    Texas: {
      Dallas: ["75201", "75202"],
      Austin: ["73301", "73344"],
    },
  },
  Germany: {
    Bavaria: {
      Munich: ["80331", "80333", "80335", "80336"],
      Nuremberg: ["90402", "90403", "90404", "90405"],
    },
    Hessen: {
      Frankfurt: ["60306", "60308", "60309", "60310"],
      Surat: ["55246", "55247", "55248", "55249"],
    },
  },
};

Windows loading function

When the window loades it will first select all the necessary elements from the DOM using javascript querySelector.

window.onload = function () {
  //todo: Get all input html elements from the DOM

  const countrySelection = document.querySelector("#Country"),
    stateSelection = document.querySelector("#State"),
    citySelection = document.querySelector("#City"),
    zipSelection = document.querySelector("#Zip");
}

Disable all options

Next you can disable all option in the dropdown. This is “Option” no pown intended. But if you wish your options to appear disabled when you load the page then you definitely need this options.

// todo: Disable all  Selection by setting disabled to false
  stateSelection.disabled = true; // remove all options bar first
  citySelection.disabled = true; // remove all options bar first
  zipSelection.disabled = true; // remove all options bar first

Load countries

 for (let country in countryStateInfo) {
    countrySelection.options[countrySelection.options.length] = new Option(
      country,
      country
    );
  }

Change Country

In order to whos the countries you need to add a on change event listener to the

  //Todo: Country Changed

  countrySelection.onchange = (e) => {
    stateSelection.disabled = false;
    // todo: Clear all options from State Selection
    stateSelection.length = 1; // remove all options bar first
    citySelection.length = 1; // remove all options bar first
    zipSelection.length = 1; // remove all options bar first

    // if (e.target.selectedIndex < 1) return; // done

    // todo: Load states by looping over countryStateInfo
    for (let state in countryStateInfo[e.target.value]) {
      stateSelection.options[stateSelection.options.length] = new Option(
        state,
        state
      );
    }
  };

Change State

Change the state by using the on change event listener

  //todo: State Changed
  stateSelection.onchange = (e) => {
    citySelection.disabled = false;

    citySelection.length = 1; // remove all options bar first
    zipSelection.length = 1; // remove all options bar first
    for (let city in countryStateInfo[countrySelection.value][e.target.value]) {
      citySelection.options[citySelection.options.length] = new Option(
        city,
        city
      );
    }
  };

City Change

Change the city in order to have acces to the zicodes

  //todo: State Changed
  stateSelection.onchange = (e) => {
    citySelection.disabled = false;
    citySelection.length = 1; // remove all options bar first
    zipSelection.length = 1; // remove all options bar first
    for (let city in countryStateInfo[countrySelection.value][e.target.value]) {
      citySelection.options[citySelection.options.length] = new Option(
        city,
        city
      );
    }
  };

Thank you for your time

Hope you enjoyed this short HTML CSS and JavaScript Project, if you did then plase share it with others.

Video Tutorial

Check out the video tutorial for this post for a more detailed and visual explanation .

Check out more post

You might be interested in relevant Post link:

• How to install Bootstrap in Visual Studio Code
• How to run JavaScript in Visual Studio Code

How to Run JavaScript in Visual Studio Code