To send a visitor to a page after they choose an option, read the HTML <select> element’s selected value in a JavaScript change handler, then navigate with window.location.assign(). Use an empty prompt option so the initial selection is not treated as a destination.
Redirect when a visitor selects an option
In each <option>, put the destination URL in value and the human-readable choice between the tags. The select element’s JavaScript value property gives you the value of the selected option, as described in MDN’s documentation for the HTML select element.
As an Amazon Associate I earn from qualifying purchases.
<label for="destination">Choose a destination</label>
<select id="destination">
<option value="">Choose a page</option>
<option value="/about">About</option>
<option value="/contact">Contact</option>
</select>
<script>
const destination = document.querySelector("#destination");
destination.addEventListener("change", () => {
if (destination.value) {
window.location.assign(destination.value);
}
});
</script>The listener runs when the selection changes. The empty value on “Choose a page” makes the if check ignore the prompt rather than navigating to an empty destination. window.location.assign() performs client-side navigation; MDN documents it as a JavaScript redirection method in its guide to HTTP redirections.
This example assumes the option values are authored and controlled by the site. If destinations can be influenced by untrusted input, validate them or restrict them to an allowlist of permitted URLs.
#1 Best Overall
Choose the right interaction
| Approach | Use it when | Trade-off |
|---|---|---|
| Select with an automatic JavaScript redirect | The list is compact and it is clear to users that choosing an option will navigate immediately. | Requires JavaScript, and the selection itself changes the page. |
| Select with a separate Go button | Visitors should be able to choose and review an option before leaving. | Adds an action step; make the button’s purpose clear. |
| Ordinary links | The choices are destinations users may want to open, copy, bookmark, or activate individually. | A long list can take more space than a select. An anchor with a real href represents a hyperlink to a URL; see MDN’s anchor-element guidance. |
| Server-side HTTP redirect | The server should send a requested URL to a canonical or replacement location consistently. | This is a server-configured rule, not a per-user menu choice. |
For a separate action, keep the same labeled select and read its value from the button’s click handler instead of navigating in the change handler. That lets the visitor confirm the choice before the page changes.
If the choices are simply page links, use real links rather than a fake anchor such as href="#" or javascript:void(0). MDN notes that placeholder anchors can behave unexpectedly when copied, dragged, opened in a new tab, bookmarked, or when JavaScript is unavailable.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Make the dropdown understandable and predictable
- Associate a visible
<label>with the select using matchingforandidvalues, and give each option meaningful text. MDN describes a select as typically being associated with a label. - Tell visitors when choosing an option will take them to another page. A selection change does not inherently need to change context: W3C WAI’s SCR19 technique demonstrates using a select’s
changeevent to update another element without navigating. W3C presents techniques as examples, not mandatory implementations. - Do not navigate just because the page loaded with a default selection. Trigger navigation from the user’s change or button action.
When to use a server redirect instead
A dropdown is a user interface for choosing among destinations. A redirect rule is a server response that sends a requested URL elsewhere. For a permanent move or a temporary redirect, configure the corresponding HTTP response on the server when possible. MDN recommends HTTP redirects where they fit because the server handles them before sending the page; unnecessary internal redirect hops add performance cost. Its redirect guide also explains that permanent and temporary status codes differ in how they communicate the move and handle request methods.
Recommended Free Tools
The JavaScript pattern above only works when the visitor’s browser executes JavaScript. It is not a substitute for a server redirect when the destination rule must be enforced by the server.
Quick Recap
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Rank #3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
