flag menu down

HTML

<div class="flagdropdown" style="z-index:1000" id="flagdropdown-position-1">
  <div class="flagdropdown-selected">
    <span class="flag-icon flag-icon-cn"></span>
    <span>Chinese</span> <i class="bi bi-arrow-down"></i>
  </div>
  <div class="flagdropdown-options" style="display:none;">
    <div class="flagdropdown-option" data-value="cn">
      <span class="flag-icon flag-icon-cn"></span>
      <span>Chinese</span>
    </div>
    <div class="flagdropdown-option" data-value="vn">
      <span class="flag-icon flag-icon-vn"></span>
      <span>Việt Nam</span>
    </div>
    <div class="flagdropdown-option" data-value="en">
      <span class="flag-icon flag-icon-gb"></span>
      <span>English</span>
    </div>
  </div>
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css" rel="stylesheet" />

CSS

.flagdropdown {
  position: relative;
  cursor: pointer;
  border: 0.5px solid gray;
  width: 110px;
  position: absolute;
  content: "&#9660;";
  left: 50%;
  top: 10%;
  transform: translate(-50%, 50%);
}

.flagdropdown::after {
  content: '⌄';
  position: absolute;
  top: -6px;
  right: 2px;
  width: 10px;
  height: 10px;
  pointer-events: none;
}

.flagdropdown-options {
  position: absolute;
  width: 100%;
  z-index: 10;
  background: #fff;
}

.flagdropdown-option {
  padding: 5px;
}

.flagdropdown-option:hover {
  background-color: #f0f0f0;
}

.flagdropdown-position-1 {
  object-position: 5px;
  top: 55%;
  border-radius: 0.25rem;
}

JavaScript

var flagdropdownSelected = document.querySelector('.flagdropdown-selected');
if (!flagdropdownSelected.hasEventListener) {
  // Add the event listener only if it hasn't been added before
  flagdropdownSelected.addEventListener('click', function() {
    var options = document.querySelector('.flagdropdown-options');
    console.log(options.style.display);
    options.style.display = options.style.display === 'none' ? 'block' : 'none';
  });
  // Mark that the event listener has been added
  flagdropdownSelected.hasEventListener = true;
}

function getURLParameters() {
  return new URLSearchParams(window.location.search);
}

function updateURLParameter(params, key, value) {
  if (params.has(key)) {
    params.set(key, value);
  } else {
    params.append(key, value);
  }
}

var urlParams = getURLParameters();
var lang = urlParams.get('lang'); // Fetch the 'lang' parameter from the URL
var found = false;

if (!found && lang !== null) {
  // Example: Automatically select the first option
  var firstOption = document.querySelector('.flagdropdown-option');
  document.querySelector('.flagdropdown-selected').innerHTML = firstOption.innerHTML;
}

document.querySelectorAll('.flagdropdown-option').forEach(function(option) {
  var value = option.getAttribute('data-value');
  if (value === lang) {
    // If a matching option is found, update the selected item and set found to true
    document.querySelector('.flagdropdown-selected').innerHTML = option.innerHTML;
    found = true;
  }
  // Attach click event listener to each option
  option.addEventListener('click', function() {
    // On click, update the selected item, close the flagdropdown, and redirect
    document.querySelector('.flagdropdown-selected').innerHTML = this.innerHTML;
    document.querySelector('.flagdropdown-options').style.display = 'none';
    var newURLParams = new URLSearchParams(urlParams.toString()); // Clone the existing parameters
    updateURLParameter(newURLParams, 'lang',...