Coder Perfect

href links within the option> tag


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>

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>

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>

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, if you are viewing a page with a non-traditional browser (a non graphical browser or screen reader or the page is accessed programmatically, or JavaScript is disabled) what then is the “meaning” or the “intent” of this you have used for navigation? It only says “please choose a page name” and nothing else, including nothing about navigation. The easy response to this is well i know that my users will be using IE or whatever so shrug but this kinda misses the point of semantic importance. Whereas a funky drop-down UI element made of suitable layout elements (and some js) containing some regular anchors still retains it intent even if the layout element is lost, “these are a bunch of links, select one and we will navigate there”. 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. When it comes to manipulating selects using a keyboard, though, selecting any option is a piece of cake: QuillBot will rewrite your text. Start by writing or pasting something here and then press the Paraphrase button. 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