CODEWITHSUNDEEP
javascriptjquery
Yurii
Yurii

Reputation: 61

Dropdown menu save the choice on reload

I need to create popup language dropdown menu with country name, flag and link to the language version of the site. After user select menu item - it should take you to the needed url (language version of the page) and this choice should stay visible on the new page (after reload). Example of the menu - https://prnt.sc/sjumj8 (https://www.farfetch.com/shopping/women/items.aspx)

Here is an example of what I'm trying to create: https://jsfiddle.net/Okean/8x0atLpy/62/

<ul class="list-unstyled" id="select-lang">
    <li class="init">[SELECT]</li>
    <li data-value="value 1"> <a href="#"> <img src="https://image.flaticon.com/icons/svg/197/197615.svg"> Language 1 </a> </li>
    <li data-value="value 2"> <a href="#"> <img src="https://image.flaticon.com/icons/svg/197/197386.svg">Language 2 </a> </li>
    <li data-value="value 3"> <a href="#"> <img src="https://image.flaticon.com/icons/svg/197/197484.svg">Language 3 </a> </li>
    <li data-value="value 4"> <a href="#"> <img src="https://image.flaticon.com/icons/svg/197/197380.svg">Language 4 </a> </li>
</ul>

$("ul").on("click", ".init", function() {
    $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
});



window.onload = function() {
    var selItem = sessionStorage.getItem("SelItem");  
    $('#select-lang').val(selItem);
    }
    $('#select-lang').change(function() { 
        var selVal = $(this).val();
        sessionStorage.setItem("SelItem", selVal);
    });

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li img {
  width: 20px;
}

Upvotes: 0

Views: 878

Answers (1)

can_pacis
can_pacis

Reputation: 315

You can use localStorage. Once user is selected an option, you can save it to browser's local storage where 'language' is your key and you can name it anything and where 'selectedOption' is the language user has selected.

// Set the preference
window.localStorage.setItem("language", selectedOption);

// Get the preference, anytime you want once set
window.localStorage.getItem("language")

Upvotes: 1

Related Questions