Redirect to a Page from a JavaScript Dropdown

A dropdown can be used as a navigation control by mapping known option values to known URLs and changing window.location.href after the user chooses a destination. For ordinary site navigation, visible links are usually easier to discover and use; use a select menu when the compact control genuinely fits the interface.

const routes = {
  PHP: "../php_tutorial/site_map.php",
  MySQL: "../sql_tutorial/site_map.php",
  JS: "site_map.php"
};

Redirect from One Dropdown Top ↑

const select = document.getElementById("s1");
select.addEventListener("change", () => {
  const destination = routes[select.value];
  if (destination) {
    window.location.href = destination;
  }
});

The original tutorial used getElementById() and a switch statement. A switch still works, but an object map keeps the relationship between values and URLs compact.

Use Known Values, Not Arbitrary URLs Top ↑

Map a fixed set of option values to destinations you control. Do not accept a free-form URL from the visitor and assign it directly to window.location.

Handle Placeholder and Unknown Values Top ↑

The old script redirected unmatched values to the home page. The revised example simply does nothing when the placeholder or an unknown value is selected, avoiding an unexpected navigation.

Redirect from the Second Dependent Dropdown Top ↑

The original tutorial also combines redirection with the dependent dropdown example. Choose “Scripts” in the first list and a supported technology in the second list to navigate.

subcategory.addEventListener("change", () => {
  const destination = routes[subcategory.value];
  if (destination) {
    window.location.href = destination;
  }
});

Navigation Alternatives Top ↑

If the user needs to compare destinations before choosing, a list of normal links is more direct. If the dropdown is part of a form, consider a submit button instead of navigating immediately on selection so the action is explicit.

← Listbox

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: