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

我有以下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>

<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月）：在这个时代，如果您想使用下拉菜单，可以说有很多可以实现的更好的方法。此答案是对直接问题的直接答案，但我不主张将这种方法用于面向公众的网站。

更新（2020年5月）：有人在评论中问为什么我不主张这种解决方案。我想这是语义问题。我宁愿我的用户使用<a>并保留<select>进行表单选择的原因，因为HTML元素具有语义会议，并且它们有目的，anchors可以代替您，<select>是代替从列表中挑选东西。

考虑一下，如果您正在使用非传统浏览器查看页面（非图形浏览器或屏幕阅读器，或者以编程方式访问该页面，或者禁用了JavaScript），那么您的“含义”或“意图”是<select>什么？用于导航？这是在说“请选择一个页面名称”，而不是很多，当然，关于导航没有任何意义。对此的简单响应是，well i know that my users will be using IE or whatever so shrug但这有点遗漏了语义重要性。

尽管由适当的布局元素（和一些js）组成的时髦下拉UI元素（包含一些常规锚点）仍然保留了其意图，即使布局元素丢失了，“这些都是一堆链接，选择一个链接，我们将在那里导航” 。

这是一篇有关滥用和滥用的文章<select>。

您不能将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>

请使用真实的下拉菜单：列表（ul，li）和链接。切勿将表单元素误用作链接。

具有屏幕阅读器的阅读器通常会扫描自动生成的链接列表-会丢失这些重要信息。许多键盘导航系统（例如JAWS，Opera）为链接和表单元素提供了不同的键盘快捷方式。

如果您仍然不能放弃想法，select请onchange至少不要使用处理程序。对于键盘用户来说，这确实是一个痛苦，它使您的第三项几乎无法访问。

公认的解决方案看起来不错，但是有一种情况无法解决：

重新选择相同的选项时，不会触发“ 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);
});

（我没有足够的声誉来评论toscho的答案。）

我没有使用屏幕阅读器的经验，并且我确定您的观点是正确的。

但是，就使用键盘来操纵选择而言，使用键盘选择任何选项都是微不足道的：

TAB控件

空格键打开选择列表

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

ENTER选择所需的项目

仅在ENTER上会触发onchange或（JQuery .change（））事件。

尽管我个人不会将表单控件用于简单菜单，但是有许多Web应用程序都使用表单控件来更改页面的显示方式（例如，排序顺序）。这些都可以由AJAX实施，以将新内容加载到页面，或者在较旧的实现中，通过触发新的页面加载（本质上是页面链接）来实现。

恕我直言，这些是表单控件的有效用法。

该<select>标签创建一个下拉列表。您不能将html链接放在下拉列表中。

但是，有些JavaScript库提供类似的功能。这是一个示例：http : //www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

    <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>

试试这个代码

<select name="forma" onchange="location = this.options[this.selectedIndex].value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>