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

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

更新(2020 年 5 月):有人在评论中问我为什么不提倡这种解决方案。我想这是一个语义问题。我宁愿我的用户使用 <a> 导航并保留 <select>用于进行表单选择，因为 HTML 元素具有语义 session 并且它们有目的，anchors带你去，<select>用于从列表中挑选东西。

考虑一下，如果您正在使用非传统浏览器(非图形浏览器或屏幕阅读器或以编程方式访问页面，或禁用 JavaScript)查看页面，那么“含义”或“意图”是什么这个<select>你用过导航吗？它是在说“请选择一个页面名称”而不是其他很多内容，当然与导航无关。对此的简单回应是 well i know that my users will be using IE or whatever so shrug但这有点忽略了语义的重要性。

虽然由包含一些常规 anchor 的合适布局元素(和一些 js)组成的时髦下拉 UI 元素仍然保留其意图，即使布局元素丢失，“这些是一堆链接，选择一个我们将导航到那里”。

这是关于 the misuse and abuse of <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 月):在当今时代，如果您想拥有一个下拉菜单，可以说有很多 better ways to implement one.这个答案是对一个直接问题的直接回答，但我不提倡这种方法用于面向公众的网站。