Redirect automatically when selecting an item from a select drop-down list

Question

This page does it the way I want it to: http://www.web-source.net/javascript_redirect_box.htm

But I want to find a better way using jQuery, can anyone point me to a good script that uses jQuery to accomplish this?

Answer 1

You don't need a pre-packaged script for this, just a couple lines of code.

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

Others have given good answers on how to do this, but...

Just a warning, IE handles select list onChange very differently from other browsers when someone is navigating via a keyboard. It counts every key up/key down press as an onChange event, meaning that you can't navigate a redirect select list via keyboard, killing accessibility for users who can't use the mouse. (Other browsers wait for an "enter" event, or a tab out of the select list, before firing onChange.) I've spent a long, long time trying to hack a workaround for this, and never fully solved the problem.

I don't know if jQuery accounts for this; hopefully it does, for your site's accessibility's sake.

It may be worth making the select list choose where to go, then have a button next to it actually activate the redirect. (Unless you don't care about IE users' accessibility.)