using href links inside option tag

Question

I have the following HTML code    lt select name  forma  gt       lt option value  Home  gt Home lt  option gt       lt option value  Contact  gt Contact lt  option gt       lt option value  Sitemap  gt Sitemap lt  option gt   lt  select gt    How can I make Home  Contact and Sitemap values as links  I used the following code and as I expected it didn t work    lt select name  forma  gt       lt option value  Home  gt  lt a href  home php  gt Home lt  a gt  lt  option gt       lt option value  Contact  gt  lt a href  contact php  gt Contact lt  a gt  lt  option gt       lt option value  Sitemap  gt  lt a href  sitemap php  gt Sitemap lt  a gt  lt  option gt   lt  select gt

User · Answer

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

User · Answer

lt select name  forma  onchange  location   this value   gt    lt option value  Home php  gt Home lt  option gt    lt option value  Contact php  gt Contact lt  option gt    lt option value  Sitemap php  gt Sitemap lt  option gt   lt  select gt    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   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  lt a gt  and kept  lt select gt  for making form selections because HTML elements have semantic meeting and they have a purpose  anchors take you places   lt select gt  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  lt select gt  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  lt select gt

User · Answer

Try this Code   lt select name  forma  onchange  location   this options this selectedIndex  value   gt    lt option value  Home php  gt Home lt  option gt    lt option value  Contact php  gt Contact lt  option gt    lt option value  Sitemap php  gt Sitemap lt  option gt   lt  select gt

User · Answer

You cant use href tags within option tags  You will need javascript to do so   lt select name  quot formal quot  onchange  quot javascript handleSelect this  quot  gt   lt option value  quot home quot  gt Home lt  option gt   lt option value  quot contact quot  gt Contact lt  option gt   lt  select gt    lt script type  quot text javascript quot  gt    function handleSelect elm           window location   elm value  quot  php quot        lt  script gt

User · Answer

The  lt select gt  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

User · Answer

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   lt select id  sampleSelect   gt     lt option value  Home php  gt Home lt  option gt     lt option value  Contact php  gt Contact lt  option gt     lt option value  Sitemap php  gt Sitemap lt  option gt   lt  select gt    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

User · Answer

lt select name  career  id  career  onchange  location   this value   gt           lt option value  resume  selected gt  All Applications  lt  option gt           lt option value  resume amp j 14  gt Seo Expert lt  option gt           lt option value  resume amp j 21  gt Project Manager lt  option gt           lt option value  resume amp j 33  gt Php Developer lt  option gt       lt  select gt

User · Answer

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

[html] using href links inside <option> tag

Examples related to html

Examples related to forms

Examples related to tags

Examples related to anchor

Examples related to option