Javascript: Dropdown Navigation

Navigate to a page using a dropdown

Here's how to use a dropdown to redirect a page to another page or website. Note: The below code will only work for one dropdown per page. If additional dropdowns are required, the element ID will need to be modified.


After you select a link, press go to jump to that link.

How-to: html

<div class="form-item form-type-select">
  <label for="jump-link">Select a Link</label>
  <div>After you select a link, press go to jump to that link.</div>
    <select class="form-select" id="jump-link">
    <option value="/science-and-technology">Science and Technology</option>
    <option value="/learn-issues">Learn the Issues</option>
    <option value="/laws-regulations">Laws and Regulations</option>
  </select> <input class="form-submit" id="open-link" type="submit" value="Go">

How-to: JavaScript

  jQuery(document).ready(function() {
    jQuery("#open-link").click(function () {
      var go_to_url = jQuery("#jump-link").find(":selected").val();
      document.location.href = go_to_url; //redirect