02 July 2009

Drop down link menu, script-free!

[* Almost script-free. The value of the the 'onChange' attribute is actually a one-line script.]
This is just a tidbit, but I found it a real pain to find. So, here it is to save you the trouble. I wanted a drop-down menu in a web page, filled with links, and without using JavaScript. Why no scripts? It just seems to me like it's a simple enough thing that it shouldn't need it. But, all of the sources I found in my initial search either 1) just covered the drop down menu ("select" box) and didn't mention links, or 2) used JavaScript to implement the drop down menu. But, I finally found what I was looking for here. The site even has a little "wizard" where you can choose various settings and then generate the html. And, here is a little demonstration:



The code for which looks like this:

<form name="form1">
<select name="menu" onChange="location=document.form1.menu.options[document.form1.menu.selectedIndex].value;">
<option value=''>Please choose</option>
<option value="http://www.freebsd.org/">FreeBSD</option>
<option value="http://www.pcbsd.org/">PC-BSD</option>
<option value="http://www.python.org/">Python</option>
</select>
</form>

(... For simplicity, though, I left out the "style" part of the select tag above.) The second line above runs off the viewable area, but I'll leave it like that to make copy and paste easier.

Labels:

5 Comments:

At 22/7/09 22:58, OpenID ethieda said...

Kace,

I am sure you could just write a simple PHP script to handle this in a few lines. Not to say you need a MySQL table to hold data or anything but PHP doesn't need javascript either. :)

 
At 23/7/09 14:31, Blogger kace said...

Really, this was about the actual HTML. Doesn't really matter whether it is static or generated by PHP or something else. The first many references I found on HTML 'select' boxes said nothing about how to make the selections into working links.

 
At 27/9/09 16:29, Blogger Rick van der Zwet said...

This example is still using JavaScript. Try disabling it in your browser and use the select box. onChange is a typical hook to call a javaScript action.

 
At 27/9/09 22:43, Blogger kace said...

Rick, you're right. Thanks.

 
At 22/7/10 05:00, OpenID lapo said...

I guess you can change "document.form1.menu" with "this" and have it both shorter and more generic. =)

 

Post a Comment

<< Home