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

---

你可以简单地按照以下链接进行操作：https://dev59.com/Kmct5IYBdhLWcg3wLqjw 希望能对你有所帮助。 - Bikram Shrestha

也许这个非 JavaScript 的解决方案会有所帮助：https://dev59.com/MWkw5IYBdhLWcg3wXZT8#24718890 - Melsi

Answer 1

更新2022年：这个答案还可以，但在2022年我们不应该再这样做了！

更新（2020年5月）：评论区有人问我为什么不支持这种解决方案。我想这是一个语义问题。我希望我的用户使用<a>进行导航，并将<select>用于选择表单，因为HTML元素具有语义意义和目的，anchors可以带你到某个地方，<select>用于从列表中选择东西。

考虑一下，如果您正在使用非传统浏览器（非图形化浏览器或屏幕阅读器或以编程方式访问页面，或JavaScript已禁用）查看页面，则您使用<select>进行导航的“含义”或“意图”是什么？它说“请选择一个页面名称”，除此之外没有任何内容，当然也没有关于导航的任何内容。对此的简单回应是好吧，我知道我的用户将使用IE或其他浏览器，所以耸耸肩，但这有点忽略了语义重要性的要点。

而一个由适当的布局元素（和一些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

---

只需将数值更改为home.php、contact.php和sitemap.php即可。 - Jason Rowe

非常酷！您可以使用这段代码 <option value="#anchor_on_my_site">...</option> 来链接到一个锚点！ - pruett

我知道这很琐碎，但应该是"onchange"而不是"ONCHANGE"。 - Oliver Dixon

你可以将它缩短为 location = this.value;。 - Ruan Mendes

只是想让您知道，您的链接无法实现一种方法。 - John

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

Answer 3

请使用真正的下拉菜单：一个列表（ul, li）和链接。不要误用表单元素作为链接。

屏幕阅读器用户通常会扫描自动生成的链接列表-他们会错过这些重要信息。许多键盘导航系统（如JAWS，Opera）为链接和表单元素提供不同的快捷键。

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

- fuxia

---

toscho 当然是正确的，makmour 的应用程序是对表单字段的严重滥用。 - gingerbreadboy

没错，但是移动设备怎么办呢？如果接受的答案与实际的下拉菜单配合使用，并在媒体查询上加上“display: hidden”开关，你的担忧是否仍然存在？或者你有更好的解决方案吗？ - Skippy le Grand Gourou

@SkippyleGrandGourou 更好的解决方案是只使用一个菜单，并在其中放置实际链接。 - fuxia

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

- Oscar Zhang

---

或者在开头添加一个空白选项：<option value=""> </option>。 - Avatar

Answer 5

(我没有足够的声望在toscho的回答中进行评论。)

我对屏幕阅读器没有经验，但我相信您的观点是正确的。

然而，就使用键盘操作选择框而言，通过键盘选择任何选项都很容易：

TAB移动到控件

按SPACE打开选择列表

使用上下箭头滚动到所需列表项

按ENTER选择所需项目

只有在按ENTER时才会触发onchange或（JQuery .change()）事件。

虽然个人认为对于简单菜单不应使用表单控件，但有许多Web应用程序使用表单控件来更改页面的呈现方式（例如，排序顺序）。这些可以通过AJAX实现以将新内容加载到页面中，也可以在早期的实现中，通过触发新的页面加载完成，本质上是一个页面链接。

在我看来，这些都是表单控件的有效用途。

- Rich Cloutier

Answer 6

< p > <select> 标签创建了一个下拉列表。您不能在下拉列表中放置HTML链接。

然而，有些JavaScript库提供类似的功能。以下是一个例子：http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

- danben

Answer 7

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

- azkhawaja

---

虽然这段代码可能回答了问题，但提供有关它如何以及/或为什么解决问题的附加上下文将改善答案的长期价值。 - rocambille

Answer 8

我相信有人可以用Jquery给出更好的答案，其中下拉菜单的更改将导致一个新页面（对于导航控制在导航栏上非常好）。

<td><select name="forma" id='SelectOption'>
            <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></td><td>

document.getElementById('SelectOption').addEventListener('change', function() {
  val = $( "#SelectOption" ).val();
    
  console.log(val)
  if(val === 'Home') {
    window.open('home.php','_blank');
    }
  if(val === 'Contact') {
    window.open('contact.php', '_blank');
  }
  if (val === 'Sitemap') {
    window.open('sitemap.php', '_blank');
  }
});

- S.Doe_Dude