flag menu down

by bvotcode

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-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...