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.
I wrote 21 books to help you become a better developer:
- HTML Handbook
- Next.js Pages Router Handbook
- Alpine.js Handbook
- HTMX Handbook
- TypeScript Handbook
- React Handbook
- SQL Handbook
- Git Cheat Sheet
- Laravel Handbook
- Express Handbook
- Swift Handbook
- Go Handbook
- PHP Handbook
- Python Handbook
- Linux Commands Handbook
- C Handbook
- JavaScript Handbook
- Svelte Handbook
- CSS Handbook
- Node.js Handbook
- Vue Handbook