190

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 and as I expected it didn't 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>
2

8 Answers 8

336

UPDATE 2022: This answer is fine but really in 2022 we shouldn't be doing this anymore!

UPDATE (May 2020): Someone asked in the comments why I wouldn't advocate this solution. I guess it's a question of semantics. I'd rather my users navigate using <a> and kept <select> for making form selections because HTML elements have semantic meeting and they have a purpose, anchors take you places, <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 <select> you have used for navigation? It is saying "please pick a page name" and not a lot else, certainly nothing about navigating. 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".

Here is an article on the misuse and abuse of <select>.

ORIGINAL ANSWER

<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 (Nov 2015): In this day and age if you want to have a drop menu there are plenty of arguably better ways to implement one. This answer is a direct answer to a direct question, but I don't advocate this method for public facing web sites.

19
  • 6
    Just change the values to home.php, contact.php and sitemap.php.
    – Jason Rowe
    Jan 4, 2010 at 16:52
  • 20
    very cool! you can use this code with <option value="#anchor_on_my_site">...</option> to link to an anchor as well!
    – pruett
    Feb 24, 2012 at 22:10
  • 3
    I know this is very trivial but should be "onchange" and not "ONCHANGE" Jun 12, 2013 at 21:48
  • 3
    You can shorten it to location = this.value; Jun 2, 2015 at 20:05
  • 2
    just to let you know your link doesnt work for ways to implement one
    – John
    Aug 10, 2018 at 6:51
25

You cant use href tags within 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>
0
15

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.

3
  • 2
    toscho is correct of course, makmour's application is a massive misuse of form fields. Oct 17, 2014 at 10:06
  • Right, but what about mobile devices ? If the accepted answer is coupled with an actual dropdown menu with a "display: hidden" switch on media query, are your concerns still valid ? Or do you have a better solution ? May 6, 2015 at 17:22
  • 1
    @SkippyleGrandGourou The better solution is to use just one menu with actual links in it.
    – fuxia
    May 6, 2015 at 17:33
7

The accepted solution looks good, but there is one case it cannot handle:

The "onchange" event will not be triggered when the same option is reselected. So, I came up with the following improvement:

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);
});
1
  • 3
    Or just add an empty option in the beginning: <option value="">&nbsp;</option>
    – Avatar
    Jan 25, 2018 at 9:27
5

(I don't have enough reputation to comment on toscho's answer.)

I have no experience with screen readers and I'm sure your points are valid.

However as far as using a keyboard to manipulate selects, it is trivial to select any option by using the keyboard:

TAB to the control

SPACE to open the select list

UP or DOWN arrows to scroll to the desired list item

ENTER to select the desired item

Only on ENTER does the onchange or (JQuery .change()) event fire.

While I personally would not use a form control for simple menus, there are many web applications that use form controls to change the presentation of the page (eg., sort order.) These can be implemented either by AJAX to load new content into the page, or, in older implementations, by triggering new page loads, which is essentially a page link.

IMHO these are valid uses of a form control.

3

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

3
    <select name="career" id="career" onchange="location = this.value;">
        <option value="resume" selected> All Applications </option>
        <option value="resume&j=14">Seo Expert</option>
        <option value="resume&j=21">Project Manager</option>
        <option value="resume&j=33">Php Developer</option>
    </select>
1
  • While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
    – rocambille
    May 10, 2017 at 9:09
1

I'm sure someone can make a better answer than this with Jquery where the change in the dropdown will lead to a new page (good for navigation control on a navbar).

<td><select name="forma" id='SelectOption'>
            <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></td><td>
document.getElementById('SelectOption').addEventListener('change', function() {
  val = $( "#SelectOption" ).val();
    
  console.log(val)
  if(val === 'Home') {
    window.open('home.php','_blank');
    }
  if(val === 'Contact') {
    window.open('contact.php', '_blank');
  }
  if (val === 'Sitemap') {
    window.open('sitemap.php', '_blank');
  }
});

Not the answer you're looking for? Browse other questions tagged or ask your own question.