using href links inside <option> tag

Question

I have the following html code:

<select name="forma">
<option value="Home">Home</option>
<option value="Contact">Contact</option>
<option value="Sitemap">Sitemap</option>
</select>

how can i make Home, Contact and Sitemap values as links? i used the following code an as i expected it didnt work,

<select name="forma">
<option value="Home"><a HREF="home.php">Home</a></option>
<option value="Contact"><a HREF="contact.php">Contact</a></option>
<option value="Sitemap"><a HREF="sitemap.php">Sitemap</a></option>
</select>

Answer 1

<select name="forma" ONCHANGE="location = this.options[this.selectedIndex].value;">
 <option value="Home">Home</option>
 <option value="Contact">Contact</option>
 <option value="Sitemap">Sitemap</option>
</select>

Answer 2

The <select> tag creates a dropdown list. You can't put html links inside a dropdown.

However, there are JavaScript libraries that provide similar functionality. Here is one example: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

Answer 3

You cant use href tags withing option tags. You will need javascript to do so.

<select name="formal" onchange="javascript:handleSelect(this)">
<option value="home">Home</option>
<option value="contact">Contact</option>
</select>

<script type="text/javascript">
function handleSelect(elm)
{
window.location = elm.value+".php";
}
</script>

Answer 4

Use a real dropdown menu instead: a list (ul, li) and links. Never misuse form elements as links.

Readers with screen readers usually scan through a automagically generated list of links – the’ll miss these important information. Many keyboard navigation systems (e.g. JAWS, Opera) offer different keyboard shortcuts for links and form elements.

If you still cannot drop the idea of a select don’t use the onchange handler at least. This is a real pain for keyboard users, it makes your third item nearly inaccessible.