Javascript: Dropdown Navigation

You can create select dropdown menus to redirect to another page or website. Note: The below code will only work for one select element per page. If additional select dropdown menus are required, the element ID will need to be modified.

The "Go" button is required for accessibility.

Example

How-to: HTML

<div class="form-item form-type-select"> <label label class="form-item__label" for="jump-link">Select a Link</label> <select class="form-item__select" id="jump-link"> <option value="/environmental-topics">Environmental Topics</option> <option value="/aboutepa">About EPA</option> <option value="/laws-regulations">Laws and Regulations</option> </select> <div class="form-item__description">When you click go, you'll navigate to another page.</div> <button class="usa-button form-submit" id="open-link" type="button">Go</button> </div>

How-to: JavaScript

<script> 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 }); }); </script>