从选择下拉列表中选择项目时自动重定向

Question

这个页面按照我想要的方式进行:http://www.web-source.net/javascript_redirect_box.htm

但是我想找到一个更好的使用jQuery的方法,有人能指出我使用jQuery来完成这个的好脚本吗？

Answer 1

您不需要为此预先打包的脚本,只需几行代码.

// get your select element and listen for a change event on it
$('#selectEl').change(function() {
  // set the window's location property to the value of the option the user has selected
  window.location = $(this).val();
});

Answer 2

其他人已就如何做到这一点给出了很好的答案,但......

只是一个警告,当有人通过键盘导航时,IE处理选择列表onChange与其他浏览器的区别非常不同.它将每个按键向上/向下按键计为onChange事件,这意味着您无法通过键盘导航重定向选择列表,从而导致无法使用鼠标的用户无法访问.(在触发onChange之前,其他浏览器会等待"输入"事件或选择列表中的选项卡.)我花了很长时间试图破解此方法,并且从未完全解决问题.

我不知道jQuery是否说明了这一点; 希望它确实如此,为您的网站的可访问性.

可能值得让选择列表选择去哪里,然后在它旁边有一个按钮实际上激活重定向.(除非您不关心IE用户的可访问性.)

Answer 3

我没有对此进行过测试,但我认为这相当于您引用的页面上的示例.

$(document).ready( function() {
   $('#select').change( function() {
      location.href = $(this).val();
   });
});

<select id="select">
    <option value="#">Select a location</option>
    <option value="location.htm">Location</option>
    <option value="other.htm">Other</option>
</select>