Question

I am trying to create a navigation shortcut on a web page using a drop down list.

I have the basic list:

<form>
 <label for="xx">Select a Location</label>
 <select name="xx" id="xx">
 <option selected>Please select one</option>
 <option value="http://www.google.com/">Google</option>
 <option value="http://www.search.com/">Search.com</option>
 <option value="http://www.dogpile.com/">Dogpile</option>
 </select>
 <input type="submit" value="Go" />
</form>

However, when implemented it just sputters and doesn’t go anywhere. Ideally I would like to be able to skip the Go button and just have it jump to the desired page after you select the link from the list.

I would appreciate some guidance on the next steps.

Thanks.

Answer 1

You can try this:

$("#xx").change( function () {
  // simulates similar behavior as an HTTP redirect
  window.location.replace($(this).val());
});

You are then using the .change() API of jquery and finding the value of the select to redirect to another page.