我已经看过几次,但我根本无法获得代码。 我需要帮助制作此下拉菜单将其设置保存到Cookie,因此当用户再次访问该网站时,将保留其先前的选择。
下拉:
<select id="ThemeSelect">
<option value="zelda">Zelda</option>
<option value="smb2">SMB 2</option>
</select>
作为参考,此代码与Wordpress小部件中的一些Javascript一起改变了css代码,就像主题选择器一样。
如何将此保存为Cookie?我觉得我已经尝试了一切!
编辑: 我应该说,但我使用这段代码来改变CSS:
var saveclass = null;
var sel = document.getElementById('ThemeSelect');
sel.onchange = function(){
saveclass = saveclass ? saveclass : document.body.className;
document.body.className = saveclass + ' ' + sel.value;
};
答案 0 :(得分:11)
这些方面的东西应该对你有用。通过javascript创建cookie的功能在 Setting a Cookie from JavaScript,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
我已将两个功能合并为一个。
<强> 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
我们可以使用此功能shamelessly stolen from this question获取Cookie。
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;
}
然后我们需要在页面加载时选择值。以下代码将完成:
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;
});
答案 1 :(得分:3)
注意:此答案会添加到Josh Mein's answer。随意合并。
我们可以使用此功能shamelessly stolen from this question.
获取Cookiefunction 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;
}
然后我们需要在页面加载时选择值。以下代码将完成此任务。
document.addEventListener('DOMContentLoaded', function() {
var themeSelect = document.getElementById('ThemeSelect');
var selectedTheme = readCookie('theme');
if (selectedTheme) {
themeSelect.value = selectedTheme;
}
});
答案 2 :(得分:-1)
您应该考虑在PHP中创建Session变量。
http://www.w3schools.com/php/php_sessions.asp
您可以将变量保存到会话中,当您加载页面时,您可以检查所设置变量的值,具体取决于它的值,下拉列表可能会以某种方式运行。也许将下拉项的名称存储为会话变量?