Problem
The HTML code I have is as follows:
<select name="forma">
<option value="Home">Home</option>
<option value="Contact">Contact</option>
<option value="Sitemap">Sitemap</option>
</select>
How do I link the Home, Contact, and Sitemap values? I tried the following code, and it didn’t work as expected:
<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>
Asked by makmour
Solution #1
<select name="forma" onchange="location = this.value;">
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>
UPDATE (November 2015): If you want to use a drop menu in today’s world, there are arguably better ways to do it. Although this is a direct response to a direct query, I do not recommend using this strategy for public-facing websites.
(May 2020) UPDATE: Someone in the comments wondered why I didn’t support this option. It’s probably a semantics issue. Because HTML components have semantic meeting and have a purpose, I’d rather my users navigate using a> and keep select> for making form selections. Anchors go you someplace, select> are for picking things from lists.
Consider what the “meaning” or “purpose” of this select> you’ve used for navigation is if you’re using a non-traditional browser (a non-graphical browser or screen reader, or the page is accessed programmatically, or JavaScript is disabled). It only says “please choose a page name” and nothing else, including nothing about navigation. The simple argument is that I know my users will be using Internet Explorer or whatever, so shrug, but this misses the issue of semantic importance.
“These are a bunch of links, select one and we’ll navigate there,” “these are a bunch of links, select one and we’ll navigate there,” “these are a bunch of links, select one and we’ll navigate there,” “these are a bunch of links, select one and we’ll navigate there,” “these are a bunch of links, select one and we’ll navigate there,” “these are a bunch of links, select one and we’ll navigate there,” “these are a
An article about the misuse and abuse of select> may be found here.
Answered by gingerbreadboy
Solution #2
Option tags cannot contain href tags. To do so, you’ll need javascript.
<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>
Answered by Zaje
Solution #3
Instead, create a true dropdown menu with a list (ul, li) and links. Form components should never be used as links.
Readers who use screen readers are accustomed to scanning through a list of links that is generated automatically; however, they will miss this vital information. Different keyboard shortcuts for links and form components are available in many keyboard navigation systems (e.g., JAWS, Opera).
If you still can’t get rid of the choose, at the very least don’t utilize the onchange handler. For keyboard users, this is a major annoyance because it makes your third item almost inaccessible.
Answered by fuxia
Solution #4
The recognized solution appears to be enough, but there is one exception:
When the same choice is reselected, the “onchange” event is not triggered. As a result, I devised the following enhancement:
HTML
<select id="sampleSelect" >
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>
jQuery
$("select").click(function() {
var open = $(this).data("isopen");
if(open) {
window.location.href = $(this).val()
}
//set isopen to opposite so next time when use clicked select box
//it wont trigger this event
$(this).data("isopen", !open);
});
Answered by Oscar Zhang
Solution #5
(I don’t have enough clout to respond to toscho’s response.)
I’m not familiar with screen readers, but I’m sure your points are well-made.
However as far as using a keyboard to manipulate selects, it is trivial to select any option by using the keyboard:
TAB to the command.
TO OPEN THE SELECT LIST, PRESS SPACE.
Scroll to the selected list item with the UP or DOWN arrows.
TO SELECT THE DESIRED ITEM, PRESS ENTER.
The onchange or (JQuery.change()) event fires only when the user presses ENTER.
While I personally would not use a form control for simple menus, many web apps do employ form controls to alter the page’s appearance (eg., sort order.) These can be implemented via AJAX to load new content into the page, or by triggering new page loads, which is effectively a page link, in older versions.
These are, in my opinion, valid applications of a form control.
Answered by Rich Cloutier
Post is based on https://stackoverflow.com/questions/2000656/using-href-links-inside-option-tag