将下拉菜单选择保存在Cookie中? [英] Saving dropdown menu selection in a cookie?
问题描述
我看过这张贴了几次,但我不能得到的代码工作。
我需要帮助,使此下拉菜单将其设置保存为cookie,所以当用户再次访问网站时,他们以前的选择将保留。
I've seen this posted a few times, but I wasn't able to get the code working at all. I need help making this drop down menu save its settings to a cookie, so when the user visits the site again, their previous selection is retained.
下拉菜单:
<select id="ThemeSelect">
<option value="zelda">Zelda</option>
<option value="smb2">SMB 2</option>
</select>
为了参考,这个代码是在Wordpress小部件中使用一些Javascript来改变CSS代码,主题选择器。
For reference, this code is with some Javascript in a Wordpress widget that changes the css code, like a theme selector.
如何将此保存为Cookie?我觉得我已经尝试了一切!
How would I make this save as a cookie? I feel like I've tried everything!
编辑:
我应该说,但我使用这个代码来改变CSS:
I should have said, but I use this code to change the CSS:
var saveclass = null;
var sel = document.getElementById('ThemeSelect');
sel.onchange = function(){
saveclass = saveclass ? saveclass : document.body.className;
document.body.className = saveclass + ' ' + sel.value;
};
推荐答案
通过javascript创建Cookie的功能位于
从JavaScript设置Cookie , javascripter.net。
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();
}
编辑:
保存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();
}
返回页面时阅读cookie
感谢dunsmoreb
Thanks to dunsmoreb
我们可以使用此函数获取cookie,无耻地从这个问题偷了。
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;
});
这篇关于将下拉菜单选择保存在Cookie中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!