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

原文由 makmour 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2022 年更新：这个答案很好，但实际上在 2022 年我们不应该再这样做了！

更新（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> 的文章。

原始答案

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

原文由 gingerbreadboy 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Zaje 发布，翻译遵循 CC BY-SA 4.0 许可协议