WP-Mix

A fresh mix of code snippets and tutorials

JavaScript redirect to URL on select

JavaScript and jQuery techniques for redirecting to the specified URL when the user makes a selection.

I use a variation of this technique in my Theme Switcha plugin.

JavaScript

Using regular JavaScript:

<form>
	<select onChange="window.document.location.href=this.options[this.selectedIndex].value;">
		<option vlaue="http://example.com/">Option 1</option>
		<option vlaue="http://example.net/">Option 2</option>
		<option vlaue="http://example.org/">Option 3</option>
		.
		.
		.

Basically the bit of inline JavaScript loads the URL specified by whichever option the user selects. As soon the selection is made, the browser loads the URL.

jQuery

If you are using jQuery, you can do something like this:

jQuery(function($) {
	$('select').on('change', function() {
		var url = $(this).val();
		if (url) {
			window.location = url;
		}
		return false;
	});
});

Where select is the selector for the select field :)

★ Pro Tip:

SES Pro