How to add a cookie to a html select drop down box

Question

Here is my 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
        }
    }
}
 }

Here everything is working fine. For example if user choses the option orange, while reloading the page, the orange selected index options remains the same by using cookies, but the div is not changing. How to make the div to remain same according to the selected option. Please help.

Answer 1

Assuming you have a change event handler for the select box which is setting the visibility of the div elements, you need to trigger the change event manually.

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')
            }
        }
    }
}

_{Note: I just added the trigger portion, this code can be written better using jQuery}

How to add a cookie to a html select drop down box

Question

1 answers

solution1
0 ACCPTED 2013-09-17 02:18:40

How to add a cookie to a html select drop down box

Question

1 answers

solution1 0 ACCPTED 2013-09-17 02:18:40

solution1
0 ACCPTED 2013-09-17 02:18:40