在<option>中使用href链接标签

问题描述

我有以下 HTML 代码:

I have the following HTML code:

<select name="forma">
    <option value="Home">Home</option>
    <option value="Contact">Contact</option>
    <option value="Sitemap">Sitemap</option>
</select>

如何将 Home、Contact 和 Sitemap 值设为链接?我使用了以下代码，但正如我所料，它不起作用:

How can I make Home, Contact and Sitemap values as links? I used the following code and as I expected it didn't work:

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

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.

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

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, anchors take you places, <select> are for picking things from lists.

考虑一下，如果您使用非传统浏览器(非图形浏览器或屏幕阅读器，或者以编程方式访问该页面，或禁用 JavaScript)查看页面，那么含义"或意图"是什么?这个 <select> 你是用来导航的吗?它说的是请选择一个页面名称"，而不是其他很多，当然与导航无关.对此的简单回应是 我知道我的用户将使用 IE 或其他任何东西耸耸肩 但这有点忽略了语义重要性.

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 shrug but this kinda misses the point of semantic importance.

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

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

这是一篇关于 <select> 的误用和滥用的文章.

Here is an article on the misuse and abuse of <select>.

这篇关于在<option>中使用href链接标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！