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

Answer 1

using jQuery:

$('#selectEl').bind("change keyup",function()
{
  // set the window's location property to the 
  // value of the option the user has selected
  window.location = $(this).val();
});

works for usual changing of options and arrow keys.

You might be able to use this extension: http://plugins.jquery.com/project/mousewheel Haven't tried it yet. :)

There are also mouse options you can add to bind() there. Go to: api.jquery.com/category/events/mouse-events/ Any function there is a name() for on that page, you can use it's 'name' in bind() above. Just as I did with change()=>'change' and mouseup()=>'mouseup' - easy peasy :)

• Peace!

Answer 2

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 3

I haven't tested this but I think it's equivalent to the sample on the page you referenced.

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

Answer 4

Simple answer, as Daniel suggests, is - you shouldn't do this, it's bad for usability and accessibility.

Select list behaviour is dependent on a combination of the user's OS, Browser and user settings (for both). Add to that the fact that the onchange event isn't implemented in a standard way across browsers.

Users should be able to have expected behaviour from a select list regardless of whether they use mouse, keyboard or mousewheel or (voice, screenreader, whatever...). If you do bind an event to the onchange it should never be one which takes the user's focus away from the select list eg. page redirect.

(Personally I navigate site forms a lot using keyboard, and if this happens I scream)

Answer 5

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