multi region and multi language selector, auto change multi selector

like in the adobe cloud sites 😉

you just need to change and match the two arrays. data array and language array. be sure to match them or it wont fire url properly.

<div id="language-container">
  <select id="regionSelect">
    <option value="">Select a Region</option>
  </select>

  <select id="countrySelect">
    <option value="">Select a Country</option>
  </select>

  <select id="languageSelect">
    <option value="">Select a Language</option>
  </select>
</div>

<div id="confirmButton">Confirm</div>


<style>
#language-container {
    display: flex;
    margin-bottom: 40px;
}

#regionSelect,
#countrySelect,
#languageSelect {
    width: 30%;
    margin-right: 15px;
    border: 0;
    border-bottom: solid 1px;
    border-radius: 0;
    cursor: pointer;
    padding: 20px;
}

#regionSelect:hover,
#countrySelect:hover,
#languageSelect:hover {
    background: #e2e2e2;
}

@media (max-width: 767px) {
    #language-container {
        display: block;
        margin-bottom: 40px;
    }

    #regionSelect,
    #countrySelect,
    #languageSelect {
        width: 96%;
    }
}
#regionSelect option:nth-child(4),
#regionSelect option:nth-child(5),
#regionSelect option:nth-child(6)
{
   
}
</style>
<script>
  // Define the data for regions, countries, and languages
  var data = {
    Europe: {
      Germany: ["German"],
      "Czech Republic": ["Czech"],
      France: ["French"],
    },
    Americas: {
      "United States": ["English"],
      Brazil: ["Portuguese"],
      Mexico: ["Spanish"],
    },
    Global: {
      Global: ["English"],
    },
  };

  var regionSelect = document.getElementById("regionSelect");
  var countrySelect = document.getElementById("countrySelect");
  var languageSelect = document.getElementById("languageSelect");
  var confirmButton = document.getElementById("confirmButton");

  // Populate the region select box
  Object.keys(data).forEach(function (region) {
    var option = document.createElement("option");
    option.value = region;
    option.text = region;
    regionSelect.appendChild(option);
  });

  // Handle region selection
  regionSelect.addEventListener("change", function () {
    var region = this.value;
    var countries = data[region];
    countrySelect.innerHTML = '<option value="">Select a Country</option>';
    languageSelect.innerHTML = '<option value="">Select a Language</option>';
    if (region !== "") {
      Object.keys(countries).forEach(function (country) {
        var option = document.createElement("option");
        option.value = country;
        option.text = country;
        countrySelect.appendChild(option);
      });
    }
  });

  // Handle country selection
  countrySelect.addEventListener("change", function () {
    var region = regionSelect.value;
    var country = this.value;
    var languages = data[region][country];
    languageSelect.innerHTML = '<option value="">Select a Language</option>';
    if (country !== "") {
      languages.forEach(function (language) {
        var option = document.createElement("option");
        option.value = language;
        option.text = language;
        languageSelect.appendChild(option);
      });
    }
  });

  // Handle confirm button click
  confirmButton.addEventListener("click", function () {
    var language = languageSelect.value;
    switch (language) {
      case "English":
        window.location.href = "https://www.google.com/en";
        break;
      case "German":
        window.location.href = "https://www.google.com/de";
        break;
      case "Czech":
        window.location.href = "https://www.google.com/cz";
        break;
      case "Portuguese":
        window.location.href = "https://www.google.com/pt-br.html";
        break;
      case "Arabic":
        window.location.href = "https://www.google.com/ar";
        break;
      // Add more cases for other languages and their corresponding URLs
    }
  });
</script>