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

Question

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

Answer 1

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

自动导航更改<select>菜单不适合导航，因为：

1. 键盘用户每次移动选择时都会触发更改事件，使他们无法使用该控件;

2. 非JavaScript代理（包括搜索引擎）将无法查看或关注链接;

3. 在页面后退/前进导航中保留表单值，使选择在导航后显示错误的值，从而无法再次选择相同的选项;

4. 用户无法使用浏览器的常规导航工具，例如中键，“在新标签中打开”或“书签链接”。

因此制作跳转菜单的“最佳”方式不是。如果你想要一些表现相似但没有这些缺点的东西，那就去找一个隐藏的<div>，然后用JavaScript重新弹出，包含指向他们去的页面的简单<a>链接。如果你真的想要的话，你可以把它设计成看起来像下拉列表，如果必须的话，你可以让它们在左键单击时打开新的窗口（尽管如此）我希望你不会这样做。

Answer 2

如果没有Javascript，您无法从<select>元素打开链接。使用Javascript打开新窗口的方法如下：

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

要附加到<select>元素，请尝试以下操作：

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

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