Question

我有以下HTML代码：

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

如何将主页，联系和站点地图值作为链接？我使用了以下代码，因为我预计它不起作用：

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

Answer 1

<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月）：在这个时代，如果你想要一个下拉菜单，有很多可以说是better ways to implement one.这个答案直接回答了直接的问题，但我并不主张这种方法适用于面向公众的网站。

Answer 2

您不能在选项标签中使用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>

Answer 3

使用真实的下拉菜单：列表（ul，li）和链接。切勿将表单元素误用为链接。

带有屏幕阅读器的读者通常会浏览自动生成的链接列表 - 这些都会遗漏这些重要信息。许多键盘导航系统（例如JAWS，Opera）为链接和表单元素提供不同的键盘快捷键。

如果你仍然不能放弃select的想法，至少不要使用onchange处理程序。对于键盘用户来说，这是一个真正的痛苦，它使你的第三个项目几乎无法访问。

Answer 4

接受的解决方案看起来不错，但有一种情况无法处理：

＆＃34; onchange＆＃34;重新选择相同选项时，不会触发事件。所以，我提出了以下改进：

HTML

<select id="sampleSelect" >
  <option value="Home.php">Home</option>
  <option value="Contact.php">Contact</option>
  <option value="Sitemap.php">Sitemap</option>
</select>

的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);
});

Answer 5

（我没有足够的声誉评论toscho的回答。）

我没有屏幕阅读器的经验，我确信你的观点是有效的。

然而，只要使用键盘来操作选择，使用键盘选择任何选项都是微不足道的：

TAB到控件

SPACE打开选择列表

向上或向下箭头以滚动到所需的列表项

按ENTER选择所需的项目

只有在ENTER上才会触发onchange或（JQuery .change（））事件。

虽然我个人不会对简单菜单使用表单控件，但是有许多Web应用程序使用表单控件来更改页面的显示（例如，排序顺序。）这些可以通过AJAX实现加载新的内容到页面中，或者在较旧的实现中，通过触发新的页面加载，这本质上是一个页面链接。

恕我直言，这些是表单控件的有效用法。

Answer 6

<select>标记会创建一个下拉列表。你不能把html链接放在下拉列表中。

但是，有些JavaScript库提供了类似的功能。以下是一个示例：http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

Answer 7

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

Answer 8

我相信有人可以用 Jquery 做出比这更好的答案，其中下拉列表中的更改将导致一个新页面（适用于导航栏上的导航控制）。

<td><select name="forma" id='SelectOption'>
            <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></td><td>

document.getElementById('SelectOption').addEventListener('change', function() {
  val = $( "#SelectOption" ).val();
    
  console.log(val)
  if(val === 'Home') {
    window.open('home.php','_blank');
    }
  if(val === 'Contact') {
    window.open('contact.php', '_blank');
  }
  if (val === 'Sitemap') {
    window.open('sitemap.php', '_blank');
  }
});

Answer 9

试用此代码

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

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

9 个答案: