这是我的 fiddle http://jsfiddle.net/RQRss/
<body bgcolor="#FFFFFF" text="#000000" onLoad="setDefaultValues()">
<form name="form1" method="post" action="">
<select name="eye_color" onChange="setCookie(this.name,this.selectedIndex)" class="selectMe">
<option value="blue">blue</option>
<option value="orange">orange</option>
<option value="purple">purple</option>
</select>
</form>
<div id="blue" class="group">
blue div
</div>
<div id="orange" class="group">
orange div
</div>
<div id="purple" class="group">
purple div
</div>
Javascript Code:
var expDays = 30; // set this value to however many days you want your cookies to last
function setCookie(name, val)
{
var exp = new Date()
var cookieTimeToLive = exp.getTime() + (expDays * 24 * 60 * 60 * 1000)
exp.setTime(cookieTimeToLive)
document.cookie = name + "=" + escape(val) + "; expires=" + exp.toGMTString()
}
function getCookie(name)
{
var cookieNameLen = name.length
var cLen = document.cookie.length
var i = 0
var cEnd
var myStringToReturn
var myStringToReturnLen
while (i < cLen)
{
var j = i + cookieNameLen
if (document.cookie.substring(i,j) == name)
{
cEnd = document.cookie.indexOf(";",j)
if (cEnd == -1)
{
cEnd = document.cookie.length
}
myStringToReturn = unescape(document.cookie.substring(j,cEnd))
myStringToReturnLen = myStringToReturn.length
myStringToReturn = myStringToReturn.substring(1,myStringToReturnLen+1)
return myStringToReturn
}
i++
}
return ""
}
function setDefaultValues()
{
var strCookieName, strCookieVal
var iFormsCount = 0
var iElementsCount = 0
for(iFormsCount=0;iFormsCount < document.forms.length;iFormsCount++)
{
for(iElementsCount=0;iElementsCount < document.forms[iFormsCount].elements.length;iElementsCount++)
{
strCookieName = document.forms[iFormsCount].elements[iElementsCount].name
strCookieVal = getCookie(strCookieName)
if (strCookieVal != null && !(isNaN(strCookieVal)) && strCookieVal != '')
{
document.forms[iFormsCount].elements[iElementsCount].selectedIndex = strCookieVal
}
}
}
}
这里一切正常。例如，如果用户选择橙色选项，在重新加载页面时，橙色选择的索引选项通过使用 cookie 保持不变，但 div 没有改变。如何根据所选选项使 div 保持不变。请帮忙。
最佳答案
假设您有一个用于设置 div 元素可见性的选择框的更改事件处理程序，您需要手动触发更改事件。
function setDefaultValues()
{
var strCookieName, strCookieVal
var iFormsCount = 0
var iElementsCount = 0
for(iFormsCount=0;iFormsCount < document.forms.length;iFormsCount++)
{
for(iElementsCount=0;iElementsCount < document.forms[iFormsCount].elements.length;iElementsCount++)
{
strCookieName = document.forms[iFormsCount].elements[iElementsCount].name
strCookieVal = getCookie(strCookieName)
if (strCookieVal != null && !(isNaN(strCookieVal)) && strCookieVal != '')
{
document.forms[iFormsCount].elements[iElementsCount].selectedIndex = strCookieVal
$(document.forms[iFormsCount].elements[iElementsCount]).trigger('change')
}
}
}
}
注意:我只是添加了触发器部分，这段代码使用jQuery可以写得更好
关于javascript - 如何将 cookie 添加到 html 选择下拉框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18840242/