Question

I am using a drop down list as a navigation option to move between pages in a section. I would like the user to be able to select from the drop down list and when they click go, have it take them to the new page.

You can see it in its not-perfected state here.

Here is the html:

<form>
 <label for="new-location">Select a Location</label>
 <select name="new-location" id="new-location">
 <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>

Here is the jQuery I have tried. However, it doesn’t work as expected.

<script type="text/javascript">
    $("#new-location").change( function () {
  // simulates similar behavior as an HTTP redirect
  window.location.replace($(this).val());
});
</script>

I would appreciate some assistance in modifying this to work correctly.

Answer 1

<script type="text/javascript">
$(function () {

    $("#new-location").change( function () {
    // simulates similar behavior as an HTTP redirect
    window.location.href = $(this).val();
    });

});
</script>