JavaScript Country Picker

Country Selector Generator — Zero-dependency country region selector

This JavaScript country picker lets you build a dynamic country selector with optional region/state linkage — without using any third-party libraries. It is designed for developers who want full control with minimal code. Use it as a country dropdown generator or country region selector component.

Use cases: Country → state / region dropdowns, signup flows with localization, SaaS onboarding forms, address collection with validation.

Example: JavaScript Country Picker

<select id="country"></select>
<select id="region"></select>

<script>
const countries = {
  US: ["California", "New York", "Texas"],
  CA: ["Ontario", "Quebec", "British Columbia"]
};

const countrySelect = document.getElementById("country");
const regionSelect = document.getElementById("region");

Object.keys(countries).forEach(code => {
  const option = document.createElement("option");
  option.value = code;
  option.textContent = code;
  countrySelect.appendChild(option);
});

countrySelect.addEventListener("change", () => {
  regionSelect.innerHTML = "";
  (countries[countrySelect.value]||[]).forEach(region => {
    const opt = document.createElement("option");
    opt.textContent = region;
    regionSelect.appendChild(opt);
  });
});
</script>

Why this approach? Predictable behavior, easy to debug, no bundle size impact. For static forms, consider the HTML country selector instead.