在<option>标签内使用href链接

Question

我有以下HTML代码:

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

如何将Home,Contact和Sitemap值设为链接？我使用以下代码,因为我预计它不起作用:

<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.value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>

更新(2015年11月):在这个时代,如果你想要一个下拉菜单,有很多可以说是更好的方法来实现它.这个答案是对直接问题的直接回答,但我并不主张这种方法适用于面向公众的网站.

Answer 2

你不能使用带有选项标签的href标签.你需要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>

Answer 3

使用真正的下拉菜单:列表(ul,li)和链接.永远不要将表单元素误用为链接.

有屏幕阅读器的读者通常会浏览自动生成的链接列表 - 这些都会遗漏这些重要信息.许多键盘导航系统(例如JAWS,Opera)为链接和表单元素提供不同的键盘快捷键.

如果你仍然不能放弃一个select不onchange至少使用处理程序的想法.对于键盘用户来说这是一个真正的痛苦,它使你的第三个项目几乎无法访问.

Answer 4

接受的解决方案看起来不错,但有一种情况无法处理:

重新选择相同选项时,不会触发"onchange"事件.所以,我提出了以下改进:

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);
});

Answer 5

(我没有足够的声誉评论toscho的答案.)

我没有屏幕阅读器的经验,我确信你的观点是有效的.

但是,只要使用键盘来操作选择,使用键盘选择任何选项都是微不足道的:

TAB到控制

SPACE打开选择列表

向上或向下箭头以滚动到所需的列表项

按ENTER键选择所需的项目

只有在ENTER上才会触发onchange或(JQuery .change())事件.

虽然我个人不会对简单菜单使用表单控件,但是有许多Web应用程序使用表单控件来更改页面的显示(例如,排序顺序.)这些可以通过AJAX实现,以将新内容加载到页面,或者,在较旧的实现中,通过触发新的页面加载,这实际上是一个页面链接.

恕我直言,这些是表单控件的有效用途.