template + jump menu + initially selected

I have a clear idea what I want to do... and no idea how to implement it.

I have a template-based HTML site, with a jump menu serving as navigation between pages. (The jump menu is part of the template-master and thus easily updated across the site.)

Right now, when you jump to a new page, the first option in the menu is always selected, but it would be better if whatever page was current, was the selected option in the menu.

So that's my question:
How could I dynamically set the 'selected' property of the jump menu, depending on which page was current?

Could I use javascript? or ASP?

CSS

create a class that styles a link with that style, you will then need to go through the website and add the class to the link you wish to be highlighted.

css:

Code:

---

a.here:link,
a.here:visited,
a.here:hover,
a.here:active{
 color: #FF0000;
 background-color: #000000;
}

---

xhtml:

Code:

---

<ul>
  <li><a href="home.html" class="here">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="service.html">Service</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

---

Thats probably the easiest way, you could also use javascript and DOM to do it dynamically, but it will still require editing your markup.

thanks for the reply 1stbite, but...

I don't think I've described my problem thoroughly enough. Your solution would work for text based links - but not a jump menu.

Say for example I have the following code:

Code:

---

  <select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
    <option value="page1.html" selected>page1</option>
    <option value="page2.html">page2</option>
  </select>

---

how would I dynamically set which option was "selected"?
thx.

Sorry, though you just meant a traditional menu not a form list menu.

using javascript to manipulate the DOM you could detect the page name, then loop through your list and add the 'selected' attribute accordingly

To get the page name

Code:

---

<script language="javascript" type="text/javascript">
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
alert("sPage: "+sPage);
</script>

---

Then use document.getElementsByTagName to target the form list and use a 'for' loop to check each 'option' elements 'value' attribute against the page name, if the same add the 'selected' attribute with setAttribute.

Might also want to add a snippet of code to remove any existing 'selected' attributes if no match.

Sorry for short explaination but time limited...

OK. Thanks!