[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2535
  • Last Modified:

Select Chosen Option in Menu

I have the following script set up so that one someone choses an option from a menu it passes through variables, but it does not "select" that option that was chosen. Here is my code so far:

<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
   eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
   if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</head>

<body>
<form name="selectMonth">
<select name="menu" id="menu" onChange="MM_jumpMenu('self',this,1)">
<option value="monthcal.dll?BeginDate=10/1/04&EndDate=12/31/05">October 2004</option>
<option value="monthcal.dll?BeginDate=11/1/04&EndDate=12/31/05">November 2004</option>
<option value="monthcal.dll?BeginDate=12/1/04&EndDate=12/31/05">December 2004</option>
<option value="monthcal.dll?BeginDate=1/1/05&EndDate=12/31/05">Janurary 2005</option>
<option value="monthcal.dll?BeginDate=2/1/05&EndDate=12/31/05">February 2005</option>
</select>
</form>
</body>
</html>

Let's say someone choses November 2004. I want the November 2004 option to appear like:

<option value="monthcal.dll?BeginDate=11/1/04&EndDate=12/31/05" selected>November 2004</option>

I need to be able to do this with javascript only, if that is possible.
0
thecode101
Asked:
thecode101
  • 7
  • 5
1 Solution
 
devicCommented:
change the line:
<select name="menu" id="menu" onChange="MM_jumpMenu('self',this,1)">
to:
<select name="menu" id="menu" onChange="MM_jumpMenu('self',this,0)">
0
 
devicCommented:
wait, you change location of the same page....
0
 
thecode101Author Commented:
That change did not work. Yes when an option is chosen it reloads the page with different variables passed through.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
devicCommented:
ok, try this:
==================
<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore)
{ //v3.0
      eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
}
function setDef()
{
      if(self.location.href.indexOf("?")!=-1)
      {
            alert(self.location.href.split("?")[1])
            document.selectMonth.menu.value="monthcal.dll?"+self.location.href.split("?")[1];
      }
}
//-->
</script>
</head>

<body onload=setDef();>
<form name="selectMonth">
<select name="menu" id="menu" onChange="MM_jumpMenu('self',this,1)">
<option value="monthcal.dll?BeginDate=10/1/04&EndDate=12/31/05">October 2004</option>
<option value="monthcal.dll?BeginDate=11/1/04&EndDate=12/31/05">November 2004</option>
<option value="monthcal.dll?BeginDate=12/1/04&EndDate=12/31/05">December 2004</option>
<option value="monthcal.dll?BeginDate=1/1/05&EndDate=12/31/05">Janurary 2005</option>
<option value="monthcal.dll?BeginDate=2/1/05&EndDate=12/31/05">February 2005</option>
</select>
</form>
</body>
</html>
0
 
thecode101Author Commented:
That did not work either. There is no problem with passing the variables. The problem is that when November is clicked that option needs to be selected when the page is reloaded. If December is clicked that option needs to be selected when the page is reloaded.
0
 
devicCommented:
note you can not test this on your desktop, only on server:
if you want test it on desktop,

then change name of file to: test.html AND replace all monthcal.dll to test.html

EXAMPLE:

============= test.html ===============
<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore)
{ //v3.0
      eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
}
function setDef()
{
      if(self.location.href.indexOf("?")!=-1)
      {
            document.selectMonth.menu.value="test.html?"+self.location.href.split("?")[1];
      }
}
//-->
</script>
</head>

<body onload=setDef();>
<form name="selectMonth">
<select name="menu" id="menu" onChange="MM_jumpMenu('self',this,1)">
<option value="test.html?BeginDate=10/1/04&EndDate=12/31/05">October 2004</option>
<option value="test.html?BeginDate=11/1/04&EndDate=12/31/05">November 2004</option>
<option value="test.html?BeginDate=12/1/04&EndDate=12/31/05">December 2004</option>
<option value="test.html?BeginDate=1/1/05&EndDate=12/31/05">Janurary 2005</option>
<option value="test.html?BeginDate=2/1/05&EndDate=12/31/05">February 2005</option>
</select>
</form>
</body>
</html>
0
 
thecode101Author Commented:
I am testing this on a server, and yes I renamed the page for testing purposes. It is not working. When the page is reloaded, and lets say for example December is chosen the html code should changed to:

<option value="test.html?BeginDate=12/1/04&EndDate=12/31/05" select>December 2004</option>

instead of

<option value="test.html?BeginDate=12/1/04&EndDate=12/31/05">December 2004</option>

So that December will be highlighted an appeared default selected.
0
 
devicCommented:
ach, I got it, you need the color ;)

====================================
<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore)
{ //v3.0
    eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
}
function setDef()
{
    if(self.location.href.indexOf("?")!=-1)
    {
        document.selectMonth.menu.focus();
            document.selectMonth.menu.value="test.html?"+self.location.href.split("?")[1];
    }
}
//-->
</script>
</head>

<body onload=setDef();>
<form name="selectMonth">
<select name="menu" id="menu" onChange="MM_jumpMenu('self',this,1)">
<option value="test.html?BeginDate=10/1/04&EndDate=12/31/05">October 2004</option>
<option value="test.html?BeginDate=11/1/04&EndDate=12/31/05">November 2004</option>
<option value="test.html?BeginDate=12/1/04&EndDate=12/31/05">December 2004</option>
<option value="test.html?BeginDate=1/1/05&EndDate=12/31/05">Janurary 2005</option>
<option value="test.html?BeginDate=2/1/05&EndDate=12/31/05">February 2005</option>
</select>
</form>
</body>
</html>
0
 
thecode101Author Commented:
Still not working, I am using Firefox 1.0 and IE 6.0. When you test it and chose an option, when the page reloads is that option you just selected the default option in the select menu?
0
 
devicCommented:
http://home.arcor.de/athens/expexc/js/String/test.html

IE: selected
FireFox: selected without hilighting

and what do you see?
0
 
thecode101Author Commented:
Well yours worked and when I copied it exactly it worked for me. I don't know what I was doing wrong, but I am glad it is working. Thanks for your help.
0
 
devicCommented:
thank you too!
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now