在 <option> 中使用 href 链接标签 [英] using href links inside &lt;option&gt; tag

问题描述

我有以下 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>

如何将主页、联系人和站点地图值设为链接?我使用了以下代码，但正如我所料，它不起作用:

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

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)查看页面，那么含义"或意图"是什么?这个 你用过导航吗?它说的是请选择一个页面名称"而不是其他很多内容，当然与导航无关.对此的简单回应是我知道我的用户将使用 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".

这是一篇关于误用和滥用

的文章.

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

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