Html 使用 <option> 标签内的 href 链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2000656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using href links inside <option> tag
提问by makmour
I have the following HTML code:
我有以下 HTML 代码：
<select name="forma">
<option value="Home">Home</option>
<option value="Contact">Contact</option>
<option value="Sitemap">Sitemap</option>
</select>
How can I make Home, Contactand Sitemapvalues as links? I used the following code and as I expected it didn't work:
如何将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>
回答by gingerbreadboy
<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>
UPDATE (Nov 2015):In this day and age if you want to have a drop menu there are plenty of arguably better ways to implement one.This answer is a direct answer to a direct question, but I don't advocate this method for public facing web sites.
更新（2015 年 11 月）：在这个时代，如果你想要一个下拉菜单，有很多可以说是更好的实现方法。这个答案是对一个直接问题的直接回答，但我不提倡将这种方法用于面向公众的网站。
UPDATE (May 2020):Someone asked in the comments why I wouldn't advocate this solution. I guess it's a question of semantics. I'd rather my users navigate using <a>and kept <select>for making form selections because HTML elements have semantic meeting and they have a purpose, anchorstake you places, <select>are for picking things from lists.
更新（2020 年 5 月）：有人在评论中问我为什么不提倡这种解决方案。我想这是一个语义问题。我宁愿我的用户导航使用<a>并保持<select>进行表单选择，因为 HTML 元素具有语义会议，并且它们有一个目的，anchors带你去地方，<select>用于从列表中挑选东西。
Consider, if you are viewing a page with a non-traditional browser (a non graphical browser or screen reader or the page is accessed programmatically, or JavaScript is disabled) what then is the "meaning" or the "intent" of this <select>you have used for navigation? It is saying "please pick a page name" and not a lot else, certainly nothing about navigating. The easy response to this is well i know that my users will be using IE or whatever so shrugbut this kinda misses the point of semantic importance.
考虑一下，如果您正在使用非传统浏览器（非图形浏览器或屏幕阅读器，或者以编程方式访问页面，或禁用 JavaScript）查看页面，那么您所拥有的“含义”或“意图”是<select>什么？用于导航？它说的是“请选择一个页面名称”而不是其他很多内容，当然与导航无关。对此的简单反应是，well i know that my users will be using IE or whatever so shrug但这有点忽略了语义重要性。
Whereas a funky drop-down UI element made of suitable layout elements (and some js) containing some regular anchors still retains it intent even if the layout element is lost, "these are a bunch of links, select one and we will navigate there".
而一个时髦的下拉 UI 元素由包含一些常规锚点的合适的布局元素（和一些 js）组成，即使布局元素丢失，它仍然保留它的意图，“这些是一堆链接，选择一个，我们将在那里导航” .
Here is an article on the misuse and abuse of <select>.
这是一篇关于滥用和滥用<select>.
回答by Zaje
You cant use href tags withing option tags. You will need javascript to do so.
您不能将 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>
回答by fuxia
Use a real dropdown menu instead: a list (ul, li) and links. Never misuse form elements as links.
改用真正的下拉菜单：列表 ( ul, li) 和链接。永远不要滥用表单元素作为链接。
Readers with screen readers usually scan through a automagically generated list of links – the'll miss these important information. Many keyboard navigation systems (e.g. JAWS, Opera) offer different keyboard shortcuts for links and form elements.
带有屏幕阅读器的阅读器通常会浏览自动生成的链接列表——他们会错过这些重要信息。许多键盘导航系统（例如 JAWS、Opera）为链接和表单元素提供了不同的键盘快捷键。
If you still cannot drop the idea of a selectdon't use the onchangehandler at least. This is a real pain for keyboard users, it makes your third item nearly inaccessible.
如果您仍然不能放弃至少select不要使用onchange处理程序的想法。这对键盘用户来说是一个真正的痛苦，它使您的第三个项目几乎无法访问。
回答by Oscar Zhang
The accepted solution looks good, but there is one case it cannot handle:
接受的解决方案看起来不错，但有一种情况它无法处理：
The "onchange" event will not be triggered when the same option is reselected. So, I came up with the following improvement:
当重新选择相同的选项时，不会触发“onchange”事件。所以，我想出了以下改进：
HTML
HTML
<select id="sampleSelect" >
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>
jQuery
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);
});
回答by Rich Cloutier
(I don't have enough reputation to comment on toscho's answer.)
（我没有足够的声誉来评论 toscho 的回答。）
I have no experience with screen readers and I'm sure your points are valid.
我没有使用屏幕阅读器的经验，我相信你的观点是有效的。
However as far as using a keyboard to manipulate selects, it is trivial to select any option by using the keyboard:
然而，就使用键盘操作选择而言，使用键盘选择任何选项是微不足道的：
TAB to the control
TAB 到控件
SPACE to open the select list
SPACE 打开选择列表
UP or DOWN arrows to scroll to the desired list item
向上或向下箭头滚动到所需的列表项
ENTER to select the desired item
ENTER 选择所需的项目
Only on ENTER does the onchange or (JQuery .change()) event fire.
只有在 ENTER 上才会触发 onchange 或 (JQuery .change()) 事件。
While I personally would not use a form control for simple menus, there are many web applications that use form controls to change the presentation of the page (eg., sort order.) These can be implemented either by AJAX to load new content into the page, or, in older implementations, by triggering new page loads, which is essentially a page link.
虽然我个人不会将表单控件用于简单菜单，但有许多 Web 应用程序使用表单控件来更改页面的呈现方式（例如，排序顺序）。这些可以通过 AJAX 实现以将新内容加载到页面，或者在较旧的实现中，通过触发新页面加载，这本质上是一个页面链接。
IMHO these are valid uses of a form control.
恕我直言，这些是表单控件的有效用途。
回答by danben
The <select>tag creates a dropdown list. You can't put html links inside a dropdown.
该<select>标签创建一个下拉列表。您不能将 html 链接放在下拉列表中。
However, there are JavaScript libraries that provide similar functionality. Here is one example: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
但是，有一些 JavaScript 库提供了类似的功能。这是一个例子：http: //www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
回答by azkhawaja
<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>
回答by Rakesh Chauhan
Try this Code
试试这个代码
<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>
