如何将 cookie 添加到 html 选择下拉框答案

【问题标题】：How to add a cookie to a html select drop down box如何将 cookie 添加到 html 选择下拉框
【发布时间】：2013-09-17 10:18:40
【问题描述】：

这是我的小提琴 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 保持不变。请帮忙。

【问题讨论】：

标签： javascript jquery html css cookies

【解决方案1】：

假设您有一个用于设置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可以更好地编写}

【讨论】：

谢谢兄弟，它有效。你能指导我如何接受答案。
@ronnie 在答案的左上角（在票数下方）旁边会有tick 标记...你可以使用它