Skip to content

Redirect to a link when user selects option in a select

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

I had an HTML <select> input field in a form, and I wanted to redirect to another relative URL when the user picked a specific option.

You don’t have control over the single option, for example you can’t detect an option was selected “on the option”.

You must listen to the change event in the select itself.

But you can’t access option attributes, just the value of the option.

So I ended up doing this:

<select
  x-on:change="
    if (event.target.value.startsWith('/')) {
      window.location = event.target.value
    }
  "
>
  <option value="/login">Login</option>
  <option value="/signup">Signup</option>
</select>

I’m using Alpine here as I used that in the app.

In plain JS works in the exact same way, except how you get the target, and you use onchange:

<select
  onchange="
    if (this.value.startsWith('/')) {
      window.location = this.value
    }
  "
>
  <option value="/login">Login</option>
  <option value="/signup">Signup</option>
</select>

Of course you can use an event listener too but this works quickly and is “in the element” rather than having to use selectors and ids or classes.

→ Get my HTML Handbook
→ Read my HTML Tutorial
→ Read my Alpine.js Tutorial
  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)