Redirect to a link when user selects option in a select

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.