Saving Dropdown Menu Selection in a Cookie

Saving dropdown menu selection in a cookie?

Something along these lines should work for you. The function to create a cookie via javascript was found in
Setting a Cookie from JavaScript, a post on javascripter.net.

HTML:

<select id="ThemeSelect" onchange="setCookie('theme', this.value, 365);">
    <option value="zelda">Zelda</option>
    <option value="smb2">SMB 2</option>
</select>

Javascript:

function setCookie(cookieName, cookieValue, nDays) {
    var today = new Date();
    var expire = new Date();

    if (!nDays) 
        nDays=1;

    expire.setTime(today.getTime() + 3600000*24*nDays);
    document.cookie = cookieName+"="+escape(cookieValue) + ";expires="+expire.toGMTString();
}

Edit:

Save the cookie

I have merged the two functions into one for you.

HTML:

<select id="ThemeSelect" onchange="saveTheme(this.value);">
    <option value="zelda">Zelda</option>
    <option value="smb2">SMB 2</option>
</select>

Javascript:

var saveclass = null;

function saveTheme(cookieValue)
{
    var sel = document.getElementById('ThemeSelect');

    saveclass = saveclass ? saveclass : document.body.className;
    document.body.className = saveclass + ' ' + sel.value;

    setCookie('theme', cookieValue, 365);
}

function setCookie(cookieName, cookieValue, nDays) {
    var today = new Date();
    var expire = new Date();

    if (nDays==null || nDays==0)
        nDays=1;

    expire.setTime(today.getTime() + 3600000*24*nDays);
    document.cookie = cookieName+"="+escape(cookieValue) + ";expires="+expire.toGMTString();
}

Live DEMO

Read the cookie on return to the page

Thanks to dunsmoreb

We can get the cookie using this function, shamelessly stolen from this question.

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

Then we need to select the value when the page loads. The following code will accomplish just that:

document.addEventListener('DOMContentLoaded', function() {
    var themeSelect = document.getElementById('ThemeSelect');
    var selectedTheme = readCookie('theme');

    themeSelect.value = selectedTheme;
    saveclass = saveclass ? saveclass : document.body.className;
    document.body.className = saveclass + ' ' + selectedTheme;
});

Live DEMO

saving dropdown selection in cookie

You can use ngCookies module of AngularJS. You'll have to include angular-cookies.js in your code: https://code.angularjs.org/1.4.3/angular-cookies.min.js

Include ngCookies in your module declaration:

angular.module('testApp', ['ngCookies'])

Then you can save a cookie as:

$cookies.put('someKey', 'someVal');

You can retrieve a cookie as:

$cookies.get('someKey')

Updated:
Check this fiddle: http://jsfiddle.net/3xyf1bzo/

Make a value to be selected in the dropdown selectbox with a jQuery cookie

Why don't you use .val()

var roleid = $.cookie("roleid");
$('#usrole').val(roleid);

That will do the job i think

Example

var dropdowns = [    {'Id': 1, 'value': 'Blackberry'},    {'Id': 2, 'value': 'Nokia'},    {'Id': 3, 'value': 'Xiomi'}];
function GetAllRole() {    let select = document.getElementById('usrole');    for (let i = 0; i < dropdowns.length; i++) {
        var optname = dropdowns[i].value;        var optid = dropdowns[i].Id;        var el = document.createElement("option");        el.textContent = optname;        el.value = optid;        select.appendChild(el);    }}
GetAllRole();var roleid = 3;$('#usrole').val(roleid);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select id="usrole" class="form-control usrole txtboxdesign" >                    <option>Select Role</option>                </select>

jQuery cookies setting select drop down value after page refresh

I'd change this portion, if the cookie isn't there, just don't mess with the dropdown:

$(".jTitle").each(function(){
  var $titleId = $(this).attr('id');
  var $cookieValue = $.cookies.get($titleId);
  if ($cookieValue == 'Other') {
    $(this).parent().find(".jOther").show();
    $(this).val('Other');
  } else if($cookieValue) {
    $(this).val($cookieValue);
  }                       
});

The only change is to add an if check on the end, see if there is a cookie...if not the default position of 0 in the dropdown (browser default) will be left alone.

Default CSS-design, saving Dropdown Menu Selection as a Cookie with Javascript

In your init you can just add an else:

if (style !== null){
    document.getElementById("change").value = style;
} else {
    document.getElementById("change").value = "1";
}

Dropdown menu save the choice on reload

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")

---

Related Topics