faqts : Computers : Programming : Languages : JavaScript : Windows

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

34 of 55 people (62%) answered Yes
Recently 6 of 10 people (60%) answered Yes

Entry

How do I refresh/reload page without losing information selected in drop-down menus?

Aug 25th, 2001 04:37
Juergen Thelen, Goran Djuranovic,


This can be done in variuos ways, e.g. using cookies, or using global 
variables through a frameset, but all ways I am aware of are subject to 
the users approval.
In my experience it's more likely that a user allows frames than 
accepting cookies, so I'll describe the frameset way here.
The concept is simple. Just declare a global variable in your frameset 
document and set it accordingly to your drop-down menus preselection.
"dropdown.htm" will get the value of this global on load and select the 
appropriate element of your drop-down by assigning this value to your 
objects selectedIndex property.
Before reloading it just saves the current value of selectedIndex to 
the global variable, thus the circle is closed... :o)
--- snip (frameset.htm) ----
<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT language="JavaScript">
<!--
var lastSelection = 0;
//-->
</SCRIPT>
</HEAD>
<FRAMESET rows="16,*"> 
 <FRAME src="dummy.htm">
 <FRAME src="dropdown.htm">
</FRAMESET>
<NOFRAMES><BODY bgcolor="#FFFFFF" text="#000000">
</BODY></NOFRAMES>
</HTML>
--- snip (dropwdown.htm) ---
<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT language="JavaScript">
<!--
alert('lastSelection was: ' + parent.lastSelection);
function SaveNReload()
{
  parent.lastSelection = document.myform.mydropdown.selectedIndex;
  location.reload();
}
function Init()
{
  document.myform.mydropdown.selectedIndex = parent.lastSelection;
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" onload="Init()">
<FORM name="myform" method="post" action="">
 <SELECT name="mydropdown">
  <OPTION selected>element0</OPTION>
  <OPTION>element1</OPTION>
  <OPTION>element2</OPTION>
 </SELECT>
</FORM>
<P><A href="javascript:SaveNReload()">Reload</A></P>
</BODY>
</HTML>
--- snap -------------------
The frame "dummy.htm" is just an empty HTML document, you don't really 
need it, to test the function.
Hth, Juergen