制作跳转菜单（HTML 选择下拉菜单）的最佳方法是什么？答案

【问题标题】：What is the best way to make jump menu (HTML select dropdown)?制作跳转菜单（HTML 选择下拉菜单）的最佳方法是什么？
【发布时间】：2010-01-26 11:21:04
【问题描述】：

HTML <select> 中的每个 <option> 都有外部 URL，应该在新窗口中打开。如果可以只用 CSS 和 HTML 制作就很好，如果没有 JavaScript 就不可能，那么它应该是不引人注目的。

【问题讨论】：

“不要”。说真的，跳转菜单是一种糟糕的 UI 设计（就像不是用户触发的新窗口一样）

标签： jquery css xhtml

【解决方案1】：

“跳转菜单”是多年前的一个名誉扫地的导航设备，不应该被带回来。

Auto-navigate-on-change <select> 菜单不适合导航，因为：

键盘用户每次移动选择时都会触发一个更改事件，使他们无法使用控件；
非 JavaScript 代理（包括搜索引擎）将无法查看或点击链接；
表单值保留在页面后退/前进导航中，使选择在导航后显示错误的值，从而无法再次选择相同的选项；
用户无法使用浏览器的常规导航工具，例如中键单击、“在新标签页中打开”或“书签链接”。

因此，制作跳转菜单的“最佳”方式不是。如果您想要一些行为相似但没有这些缺点的东西，请选择 <div>，它会被 JavaScript 隐藏并重新弹出，其中包含指向它们所访问页面的普通 <a> 链接。如果你真的想要的话，你可以把它设置成一个下拉菜单，如果你必须的话，你可以让它们在左键单击时打开新窗口（但我希望你不会这样做）。

【讨论】：

但是使用脚本
是正确的吗？如果我们将使用
那么如果 css 和 js 被禁用会发生什么
如果 CSS 被禁用，您会得到一个简单的链接列表，这是您所希望的最好的。为了让它在没有 JS 的情况下仍然可用，你让 div 在普通页面中可见，然后使用脚本隐藏它直到它被打开。
好的，那么我认为这将是一个不错的选择stackoverflow.com/questions/1897129/…
我同意一般原则，但是：“键盘用户每次移动选择时都会触发更改事件，从而使他们无法使用控件。”真的吗？我认为 onchange 事件只有在您实际选择了 select 字段中的选项时才会触发。
它依赖于浏览器。目前 IE 和 Opera 在每个键盘上/下时触发 onchange，而 Firefox 和 Webkit 将 onchange 延迟到 onblur。（这也不是很好：您选择一个页面，然后什么都不会发生，直到您碰巧单击或切换到其他地方，导致该字段失焦。）

【解决方案2】：

您无法在没有 Javascript 的情况下打开来自 <select> 元素的链接。用Javascript打开一个新窗口的方法是这样的：

window.open("http://example.com");

要附加到<select> 元素，试试这个：

$('#selectId').change( function() {
    window.open( $(this).val() );
}

假设 URL 设置在每个 <option> 元素的 value 属性中。

【讨论】：

这里假设使用了 jquery 或类似的库，它不是纯 javascript。
@DisgruntledGoat，您是否编辑了 OP 并添加了 jquery 标签？！？
@Gaby：在问愚蠢的问题之前检查编辑怎么样？ :p
我知道这是牵强附会（从第一条评论）。我也不知道我能看到编辑...我道歉.. 脸红
@EricSebasta 问题被标记为jquery