How would i save menu values?

JavaScript
1

im trying to have it save menu selections, i was thinking either cookies or
storing it in the .window thing but i am unsure of how to do these, any help would be great.

<script type="text/javascript">

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}


function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\\s+|\\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

<!--
// initialise shortcuts on page load
var selectObj1=null, selectObj2=null// global
 function init()
  { selectObj1=document.getElementById("select_1");
    selectObj2=document.getElementById("select_2");
    selectObj2.disabled=true;

// ========== end init() ==============
// second select box options list
var A= new Array()
A["remote 1"]=["0","yup","DVD-1"];
A["remote 2"]=["0","VCR-1","DVD-2"];
//

// global variables
var saveObj=null, indx=null, targetObj=null, selectNo=null;   
//
 function process(obj,sNumb)
  { // disable unused select boxes
    if(sNumb==1)
     { selectObj1.selectedIndex="0";
       selectObj1.disabled=true;
     }
    else if( sNumb==2)
	 { selectObj1.selectedIndex="0";
       selectObj1.disabled=true;
     }
   //
   // store selected index   
    indx=obj.options.selectedIndex;
   // invalid selection
    if(indx==0){ return; }
   // ---------
   // save passed parameters for use after timeout deleay   
    saveObj=obj, selectNo=sNumb;     
  // put object items list into next select box after clearing
     targetObj=document.getElementById("select_"+selectNo)
     targetObj.disabled=false;
   // clear any existing options note that this starts from end of list, not beginning 
     for(var i=targetObj.options.length-1;i>-1;i--)
          { targetObj.options[i]=null;  }   
  // build in short delay here to avoid error in Opera browser
      setTimeout("finishOff()",50)
    }
// ----------- 50ms delay here --------   
// called from timeout in function process()
   function finishOff()
    {  var obj=saveObj;    // from global
      // fill selectObj options 
       var i, thisItem=0;                         
      // build options list
      switch(selectNo){
      case 2 : targArray = A[obj.options[indx].value]; break;
       }   
         //
       for(i=0;i<targArray.length;i++)
         { thisItem=targArray[i];     
          // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag)
                   
           targetObj.options[i]=new Option(thisItem,thisItem,false,false);   
         }
     obj.blur();
  }
  
// ============ end process() ===================
// fires on selecting in third select box
 function finish()
  { select("["+selectObj1.value+"]  ["+selectObj2.value+"]")
  }
// ------------ 
//
window.onload=init;
//-->

</script>
2

The window object is refreshed every time a new page is loaded or refreshed, so it’s not possible to save menu values there.

Cookies are you best bet here. The createCookie, readCookie and eraseCookie functions from the Quirksmode page about cookies are what you’ll need.

3

I get how to apply the cookie to a html drop down menu, but i dont quite understand how to apply it to the javascript based one above. Any help would be appreciated, thanks

4

Here is where that script stores the selected index


// store selected index   
indx=obj.options.selectedIndex;

So it could be in the same place where you save out to a cookie the selected index, and the id of the object.

As for making use of the cookie, that would be at this place in the init function:


selectObj2.disabled=true;

To provide much more help though, I would need to be able to see a working version of what you currently have.

5

here is the working version

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Select Products 3 Levels</title>
<script type="text/javascript">

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}


function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\\s+|\\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}


<!--
// initialise shortcuts on page load
var selectObj1=null, selectObj2=null, selectObj3=null; // global
 function init()
  { selectObj1=document.getElementById("select_1");
    selectObj2=document.getElementById("select_2");
    selectObj2.disabled=true;
   //
    selectObj3=document.getElementById("select_3");
    selectObj3.disabled=true; 
   //
  }
// ========== end init() ==============
// second select box options list
var A= new Array()
A["remote_1"]=["Select here ...","TV-1","DVD-1"];
A["remote_2"]=["Select here ...","VCR-1","DVD-2"];
//
// third select box options list
var B= new Array()
B["TV-1"]=["Select here ...","Sony","Sanyo"];
B["DVD-1"]=["Select here ...","Honda","Ford", "GMH"];
B["VCR-1"]=["Select here ...","Red","Green","Blue"];
B["DVD-2"]=["Select here ...","Panasonic","Daewoo"];
//

// global variables
var saveObj=null, indx=null, targetObj=null, selectNo=null;   
//
 function process(obj,sNumb)
  { // disable unused select boxes
    if(sNumb==2)
     { selectObj2.selectedIndex="0";
       selectObj2.disabled=true;
       selectObj3.selectedIndex="0";
       selectObj3.disabled=true;
     }
    else if( sNumb==3)
     { selectObj3.selectedIndex="0";
       selectObj3.disabled=true;
     }
   //
   // store selected index   
    indx=obj.options.selectedIndex;
	setCookie(1,obj.options.selectedIndex,0)
	
   // invalid selection
    if(indx==0){ return; }
   // ---------
   // save passed parameters for use after timeout deleay   
    saveObj=obj, selectNo=sNumb;     
  // put object items list into next select box after clearing
     targetObj=document.getElementById("select_"+selectNo)
     targetObj.disabled=false;
   // clear any existing options note that this starts from end of list, not beginning 
     for(var i=targetObj.options.length-1;i>-1;i--)
          { targetObj.options[i]=null;  }   
  // build in short delay here to avoid error in Opera browser
      setTimeout("finishOff()",50)
    }
// ----------- 50ms delay here --------   
// called from timeout in function process()
   function finishOff()
    {  var obj=saveObj;    // from global
      // fill selectObj options 
       var i, thisItem=0;                         
      // build options list
      switch(selectNo){
      case 2 : targArray = A[obj.options[indx].value]; break;
      case 3 : targArray = B[obj.options[indx].value]; break;
       }   
         //
       for(i=0;i<targArray.length;i++)
         { thisItem=targArray[i];     
          // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag)
                   
           targetObj.options[i]=new Option(thisItem,thisItem,false,false);   
         }
     obj.blur();
  }
// ============ end process() ===================
// fires on selecting in third select box
 function finish()
  { alert("You have selected ["+selectObj1.value+"]  ["+selectObj2.value+"]  ["+selectObj3.value+"] ")
  }
// ------------ 
//
window.onload=init;
//-->
</script>
<style type="text/css">
<!--
.S_any { position:absolute; top:50px; width:100px; text-align:left; }
#S1    { left:10px;  }
#S2    { left:150px; }
#S3    { left:300px; }
#S4    { left:450px; }
select { width:120px; }
-->
</style>
</head>
 
<body>
 
<div id="S1" class="S_any">
  <select id="select_1" onchange="process(this,2)">
  <option value="0">Select here ....</option>
  <option value="remote_1">Remote 1</option>
  <option value="remote_2">Remote 2</option>
  </select>
</div>
<!-- end S1 -->
<div id="S2" class="S_any">
  <select id="select_2" onchange="process(this,3)">
  <option value="0">Select here ....</option>
  </select></div>
<!- end S2>
<div id="S3" class="S_any">
  <select id="select_3" onchange="process(this,4)">
  <option value="0">Select here ....</option>
  </select></div>
<!-- end S3 -->

</body>
 
</html>
6

Here is what i have so far, i put in the setcookie right below the “store index” and put the value as obj.options.selectedIndex. I get a cookie but am unsure if it is correct, and where to apply the getcookie

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Select Products 3 Levels</title>
<script type="text/javascript">

function setCookie(name, value) {
  document.cookie=name+"="+value;
}

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\\s+|\\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}


<!--
// initialise shortcuts on page load
var selectObj1=null, selectObj2=null, selectObj3=null; // global
 function init()
  { selectObj1=document.getElementById("select_1");
    selectObj2=document.getElementById("select_2");
    selectObj2.disabled=true;
   //
    selectObj3=document.getElementById("select_3");
    selectObj3.disabled=true; 
   //
  }
// ========== end init() ==============
// second select box options list
var A= new Array()
A["remote_1"]=["Select here ...","TV-1","DVD-1"];
A["remote_2"]=["Select here ...","VCR-1","DVD-2"];
//
// third select box options list
var B= new Array()
B["TV-1"]=["Select here ...","Sony","Sanyo"];
B["DVD-1"]=["Select here ...","Honda","Ford", "GMH"];
B["VCR-1"]=["Select here ...","Red","Green","Blue"];
B["DVD-2"]=["Select here ...","Panasonic","Daewoo"];
//

// global variables
var saveObj=null, indx=null, targetObj=null, selectNo=null;   
//
 function process(obj,sNumb)
  { // disable unused select boxes
    if(sNumb==2)
     { selectObj2.selectedIndex="0";
       selectObj2.disabled=true;
       selectObj3.selectedIndex="0";
       selectObj3.disabled=true;
     }
    else if( sNumb==3)
     { selectObj3.selectedIndex="0";
       selectObj3.disabled=true;
     }
   //
   // store selected index   
    indx=obj.options.selectedIndex;
	setCookie(1,obj.options.selectedIndex)
	
   // invalid selection
    if(indx==0){ return; }
   // ---------
   // save passed parameters for use after timeout deleay   
    saveObj=obj, selectNo=sNumb;     
  // put object items list into next select box after clearing
     targetObj=document.getElementById("select_"+selectNo)
     targetObj.disabled=false;
   // clear any existing options note that this starts from end of list, not beginning 
     for(var i=targetObj.options.length-1;i>-1;i--)
          { targetObj.options[i]=null;  }   
  // build in short delay here to avoid error in Opera browser
      setTimeout("finishOff()",50)
    }
// ----------- 50ms delay here --------   
// called from timeout in function process()
   function finishOff()
    {  var obj=saveObj;    // from global
      // fill selectObj options 
       var i, thisItem=0;                         
      // build options list
      switch(selectNo){
      case 2 : targArray = A[obj.options[indx].value]; break;
      case 3 : targArray = B[obj.options[indx].value]; break;
       }   
         //
       for(i=0;i<targArray.length;i++)
         { thisItem=targArray[i];     
          // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag)
                   
           targetObj.options[i]=new Option(thisItem,thisItem,false,false);   
         }
     obj.blur();
  }
// ============ end process() ===================
// fires on selecting in third select box
 function finish()
  { alert("You have selected ["+selectObj1.value+"]  ["+selectObj2.value+"]  ["+selectObj3.value+"] ")
  }
// ------------ 
//
window.onload=init;
//-->
</script>
<style type="text/css">
<!--
.S_any { position:absolute; top:50px; width:100px; text-align:left; }
#S1    { left:10px;  }
#S2    { left:150px; }
#S3    { left:300px; }
#S4    { left:450px; }
select { width:120px; }
-->
</style>
</head>
 
<body>
 
<div id="S1" class="S_any">
  <select id="select_1" onchange="process(this,2)">
  <option value="0">Select here ....</option>
  <option value="remote_1">Remote 1</option>
  <option value="remote_2">Remote 2</option>
  </select>
</div>
<!-- end S1 -->
<div id="S2" class="S_any">
  <select id="select_2" onchange="process(this,3)">
  <option value="0">Select here ....</option>
  </select></div>
<!- end S2>
<div id="S3" class="S_any">
  <select id="select_3" onchange="process(this,4)">
  <option value="0">Select here ....</option>
  </select></div>
<!-- end S3 -->

</body>
 
</html>
7

Here it is, i put the setcookie below the “store select index”, but i am unsure on how to get the data into the selectobj through the getcookie function

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Select Products 3 Levels</title>
<script type="text/javascript">

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\\s+|\\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}


<!--
// initialise shortcuts on page load
var selectObj1=null, selectObj2=null, selectObj3=null; // global
 function init()
  { selectObj1=document.getElementById("select_1");
  if 
    selectObj2=document.getElementById("select_2");
    selectObj2.disabled=true;
   //
    selectObj3=document.getElementById("select_3");
    selectObj3.disabled=true; 
   //
  }
// ========== end init() ==============
// second select box options list
var A= new Array()
A["remote_1"]=["Select here ...","TV-1","DVD-1"];
A["remote_2"]=["Select here ...","VCR-1","DVD-2"];
//
// third select box options list
var B= new Array()
B["TV-1"]=["Select here ...","Sony","Sanyo"];
B["DVD-1"]=["Select here ...","Honda","Ford", "GMH"];
B["VCR-1"]=["Select here ...","Red","Green","Blue"];
B["DVD-2"]=["Select here ...","Panasonic","Daewoo"];
//

// global variables
var saveObj=null, indx=null, targetObj=null, selectNo=null;   
//
 function process(obj,sNumb)
  { // disable unused select boxes
    if(sNumb==2)
     { selectObj2.selectedIndex="0";
       selectObj2.disabled=true;
       selectObj3.selectedIndex="0";
       selectObj3.disabled=true;
     }
    else if( sNumb==3)
     { selectObj3.selectedIndex="0";
       selectObj3.disabled=true;
     }
   //
   // store selected index   
    indx=obj.options.selectedIndex;
	setCookie(1,indx,"")
	
   // invalid selection
    if(indx==0){ return; }
   // ---------
   // save passed parameters for use after timeout deleay   
    saveObj=obj, selectNo=sNumb;     
  // put object items list into next select box after clearing
     targetObj=document.getElementById("select_"+selectNo)
     targetObj.disabled=false;
   // clear any existing options note that this starts from end of list, not beginning 
     for(var i=targetObj.options.length-1;i>-1;i--)
          { targetObj.options[i]=null;  }   
  // build in short delay here to avoid error in Opera browser
      setTimeout("finishOff()",50)
    }
// ----------- 50ms delay here --------   
// called from timeout in function process()
   function finishOff()
    {  var obj=saveObj;    // from global
      // fill selectObj options 
       var i, thisItem=0;                         
      // build options list
      switch(selectNo){
      case 2 : targArray = A[obj.options[indx].value]; break;
      case 3 : targArray = B[obj.options[indx].value]; break;
       }   
         //
       for(i=0;i<targArray.length;i++)
         { thisItem=targArray[i];     
          // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag)
                   
           targetObj.options[i]=new Option(thisItem,thisItem,false,false);   
         }
     obj.blur();
  }
// ============ end process() ===================
// fires on selecting in third select box
 function finish()
  { alert("You have selected ["+selectObj1.value+"]  ["+selectObj2.value+"]  ["+selectObj3.value+"] ")
  }
// ------------ 
//
window.onload=init;
//-->
</script>
<style type="text/css">
<!--
.S_any { position:absolute; top:50px; width:100px; text-align:left; }
#S1    { left:10px;  }
#S2    { left:150px; }
#S3    { left:300px; }
#S4    { left:450px; }
select { width:120px; }
-->
</style>
</head>
 
<body>
 
<div id="S1" class="S_any">
  <select id="select_1" onchange="process(this,2)">
  <option value="0">Select here ....</option>
  <option value="remote_1">Remote 1</option>
  <option value="remote_2">Remote 2</option>
  </select>
</div>
<!-- end S1 -->
<div id="S2" class="S_any">
  <select id="select_2" onchange="process(this,3)">
  <option value="0">Select here ....</option>
  </select></div>
<!- end S2>
<div id="S3" class="S_any">
  <select id="select_3" onchange="process(this,4)">
  <option value="0">Select here ....</option>
  </select></div>
<!-- end S3 -->

</body>
 
</html>
8

Here it is

I put the getcookie below the “store selected obj”, but i am unsure on how to put the data into the selectobj through the getcookie function

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Select Products 3 Levels</title>
<script type="text/javascript">

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\\s+|\\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}


<!--
// initialise shortcuts on page load
var selectObj1=null, selectObj2=null, selectObj3=null; // global
 function init()
  { selectObj1=document.getElementById("select_1");
  if 
    selectObj2=document.getElementById("select_2");
    selectObj2.disabled=true;
   //
    selectObj3=document.getElementById("select_3");
    selectObj3.disabled=true; 
   //
  }
// ========== end init() ==============
// second select box options list
var A= new Array()
A["remote_1"]=["Select here ...","TV-1","DVD-1"];
A["remote_2"]=["Select here ...","VCR-1","DVD-2"];
//
// third select box options list
var B= new Array()
B["TV-1"]=["Select here ...","Sony","Sanyo"];
B["DVD-1"]=["Select here ...","Honda","Ford", "GMH"];
B["VCR-1"]=["Select here ...","Red","Green","Blue"];
B["DVD-2"]=["Select here ...","Panasonic","Daewoo"];
//

// global variables
var saveObj=null, indx=null, targetObj=null, selectNo=null;   
//
 function process(obj,sNumb)
  { // disable unused select boxes
    if(sNumb==2)
     { selectObj2.selectedIndex="0";
       selectObj2.disabled=true;
       selectObj3.selectedIndex="0";
       selectObj3.disabled=true;
     }
    else if( sNumb==3)
     { selectObj3.selectedIndex="0";
       selectObj3.disabled=true;
     }
   //
   // store selected index   
    indx=obj.options.selectedIndex;
	setCookie(1,indx,"")
	
   // invalid selection
    if(indx==0){ return; }
   // ---------
   // save passed parameters for use after timeout deleay   
    saveObj=obj, selectNo=sNumb;     
  // put object items list into next select box after clearing
     targetObj=document.getElementById("select_"+selectNo)
     targetObj.disabled=false;
   // clear any existing options note that this starts from end of list, not beginning 
     for(var i=targetObj.options.length-1;i>-1;i--)
          { targetObj.options[i]=null;  }   
  // build in short delay here to avoid error in Opera browser
      setTimeout("finishOff()",50)
    }
// ----------- 50ms delay here --------   
// called from timeout in function process()
   function finishOff()
    {  var obj=saveObj;    // from global
      // fill selectObj options 
       var i, thisItem=0;                         
      // build options list
      switch(selectNo){
      case 2 : targArray = A[obj.options[indx].value]; break;
      case 3 : targArray = B[obj.options[indx].value]; break;
       }   
         //
       for(i=0;i<targArray.length;i++)
         { thisItem=targArray[i];     
          // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag)
                   
           targetObj.options[i]=new Option(thisItem,thisItem,false,false);   
         }
     obj.blur();
  }
// ============ end process() ===================
// fires on selecting in third select box
 function finish()
  { alert("You have selected ["+selectObj1.value+"]  ["+selectObj2.value+"]  ["+selectObj3.value+"] ")
  }
// ------------ 
//
window.onload=init;
//-->
</script>
<style type="text/css">
<!--
.S_any { position:absolute; top:50px; width:100px; text-align:left; }
#S1    { left:10px;  }
#S2    { left:150px; }
#S3    { left:300px; }
#S4    { left:450px; }
select { width:120px; }
-->
</style>
</head>
 
<body>
 
<div id="S1" class="S_any">
  <select id="select_1" onchange="process(this,2)">
  <option value="0">Select here ....</option>
  <option value="remote_1">Remote 1</option>
  <option value="remote_2">Remote 2</option>
  </select>
</div>
<!-- end S1 -->
<div id="S2" class="S_any">
  <select id="select_2" onchange="process(this,3)">
  <option value="0">Select here ....</option>
  </select></div>
<!- end S2>
<div id="S3" class="S_any">
  <select id="select_3" onchange="process(this,4)">
  <option value="0">Select here ....</option>
  </select></div>
<!-- end S3 -->

</body>
 
</html>
9

Here it is, the previous one is wrong srry

I put the getcookie below the “store selected obj”, but i am unsure on how to put the data into the selectobj through the getcookie function

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Select Products 3 Levels</title>
<script type="text/javascript">

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\\s+|\\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}


<!--
// initialise shortcuts on page load
var selectObj1=null, selectObj2=null, selectObj3=null; // global
 function init()
  { selectObj1=document.getElementById("select_1");

    selectObj2=document.getElementById("select_2");
    selectObj2.disabled=true;
   //
    selectObj3=document.getElementById("select_3");
    selectObj3.disabled=true; 
   //
  }
// ========== end init() ==============
// second select box options list
var A= new Array()
A["remote_1"]=["Select here ...","TV-1","DVD-1"];
A["remote_2"]=["Select here ...","VCR-1","DVD-2"];
//
// third select box options list
var B= new Array()
B["TV-1"]=["Select here ...","Sony","Sanyo"];
B["DVD-1"]=["Select here ...","Honda","Ford", "GMH"];
B["VCR-1"]=["Select here ...","Red","Green","Blue"];
B["DVD-2"]=["Select here ...","Panasonic","Daewoo"];
//

// global variables
var saveObj=null, indx=null, targetObj=null, selectNo=null;   
//
 function process(obj,sNumb)
  { // disable unused select boxes
    if(sNumb==2)
     { selectObj2.selectedIndex="0";
       selectObj2.disabled=true;
       selectObj3.selectedIndex="0";
       selectObj3.disabled=true;
     }
    else if( sNumb==3)
     { selectObj3.selectedIndex="0";
       selectObj3.disabled=true;
     }
   //
   // store selected index   
    indx=obj.options.selectedIndex;
	setCookie(1,indx,"")
	
   // invalid selection
    if(indx==0){ return; }
   // ---------
   // save passed parameters for use after timeout deleay   
    saveObj=obj, selectNo=sNumb;     
  // put object items list into next select box after clearing
     targetObj=document.getElementById("select_"+selectNo)
     targetObj.disabled=false;
   // clear any existing options note that this starts from end of list, not beginning 
     for(var i=targetObj.options.length-1;i>-1;i--)
          { targetObj.options[i]=null;  }   
  // build in short delay here to avoid error in Opera browser
      setTimeout("finishOff()",50)
    }
// ----------- 50ms delay here --------   
// called from timeout in function process()
   function finishOff()
    {  var obj=saveObj;    // from global
      // fill selectObj options 
       var i, thisItem=0;                         
      // build options list
      switch(selectNo){
      case 2 : targArray = A[obj.options[indx].value]; break;
      case 3 : targArray = B[obj.options[indx].value]; break;
       }   
         //
       for(i=0;i<targArray.length;i++)
         { thisItem=targArray[i];     
          // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag)
                   
           targetObj.options[i]=new Option(thisItem,thisItem,false,false);   
         }
     obj.blur();
  }
// ============ end process() ===================
// fires on selecting in third select box
 function finish()
  { alert("You have selected ["+selectObj1.value+"]  ["+selectObj2.value+"]  ["+selectObj3.value+"] ")
  }
// ------------ 
//
window.onload=init;
//-->
</script>
<style type="text/css">
<!--
.S_any { position:absolute; top:50px; width:100px; text-align:left; }
#S1    { left:10px;  }
#S2    { left:150px; }
#S3    { left:300px; }
#S4    { left:450px; }
select { width:120px; }
-->
</style>
</head>
 
<body>
 
<div id="S1" class="S_any">
  <select id="select_1" onchange="process(this,2)">
  <option value="0">Select here ....</option>
  <option value="remote_1">Remote 1</option>
  <option value="remote_2">Remote 2</option>
  </select>
</div>
<!-- end S1 -->
<div id="S2" class="S_any">
  <select id="select_2" onchange="process(this,3)">
  <option value="0">Select here ....</option>
  </select></div>
<!- end S2>
<div id="S3" class="S_any">
  <select id="select_3" onchange="process(this,4)">
  <option value="0">Select here ....</option>
  </select></div>
<!-- end S3 -->

</body>
 
</html>
10

Is it right to believe that you want to use the cookie information to recreate the menu selections when the page loads?

If so, the cookie is the least of your worries. You need to work on how to script the recreation of the menu, if for example the first select has the last option chosen and the second select has the VCR selected.

11

The first stage of things is to put together the information that you need, which you can do from the end of the init function.


function init() {
    ...
    var selectedOptions = getSelectedOptions();
    setMenus(selectedOptions);
}

Later on we can use getCookie to retrieve those values instead, but for now we’ll use some dummy data to get things started.


function getSelectedOptions() {
    return [
        {id: 'select_1', selectedIndex: 2}
        {id: 'select_2', selectedIndex: 1},
        {id: 'select_3', selectedIndex: 0}
    ];
}

We now need the web browser to set the menus according to those that are in the selectedOptions list. How can we do that? We can change the selected option and then trigger the onchange event so that the other select menus get updated, but we’ll need to use some setTimeout trickery so that we can come back to the select field after it has been updated.

Here’s setOption which will set one of the options, and setMenus which loops through our selected options


function setOption(select, selectedIndex) {
    if (select.options.selectedIndex !== selectedIndex
        && select.options.length > selectedIndex) {
        select.options.selectedIndex = selectedIndex;
        select.onchange();
        return true;
    }
}
function setMenus(selectedOptions) {
    var option,
        select,
        i;
    for (i = 0; i < selectedOptions.length; i += 1) {
        option = selectedOptions[i];
        select = document.getElementById(option.id);
        if (!select) {
            return;
        }
        if (setOption(select, option.selectedIndex) === true) {
            setTimeout(function () {
                setMenus(selectedOptions);
            }, 100);
        }
    }
}

A setTimeout has been used between each option change, to allow browsers like IE the chance to update the options list before the next one is processed.

12

Now we know what data we need to retrieve, we can go about saving that data to a cookie.

setCookie(obj.id, indx, 1);

And read that data on page load in from the getSelectedOptions function:


function getSelectedOptions() {
    var options = [],
        i = 1,
        id;
    while (document.getElementById('select_' + i)) {
        id = 'select_' + i;
        options.push({
            id: id,
            selectedIndex: Number(getCookie(id)) || 0
        });
        i += 1;
    }
    return options;
}

That’s the cookie stuff sorted out. As you can see, getting and setting the cookie are the least of the worries.

13

You sir paul_wilkins are amazing!!! :cool: :cool: :cool:

Thanks for helping me sort things out, definitely helped me with understanding the logic going on too.

Once again MUCH thanks :):):slight_smile:

14

Why do you use a concat operator for i, rather than i++?

15

That’s a personal force of habit gained by learning from Douglas Crockford. The ++ and – operators are typically responsible for bad code due to excessive trickiness, so not using them is a useful safety feature.

Also, since they are most-often used in for loops, using the += operator means that loops can be easily and consistently adjusted to increment by other values on an as-needed basis.


var i, j;
for (i = 0; i < someLen; i += 1) {
    for (j = 0; j < otherLen; j += i) {
        ...
    }
}
16

We would also be “safer” driving our cars with helmets, and 3-point harnesses, but it’s not practical.

If I saw one of my coders using i+=1, I’d be pissed.

If a programmer is writing good code, i++ should never be a problem.

And this is EXACTLY the bad coding I’m referring to (and Crockford’s trickiness).

Tons of logic like j += i scattered all over, would be a nightmare to debug in a huge codebase.

Writing clean and elegant code, is number one.