How to use html select as a navigation - html

Question

how do you use the select tag in html as a navigation?
<select>
<a><option></option></a>
</select
I have tried putting the a tag outside the option tag but it still won't work
Thank you in advance!

Answer 1

Hi #Ivan,
You cannot use the tag inside a element in HTML.
You can use switch statement in JavaScript with window.location = "your link" to achieve that kind of functionality
First create your selection tag with the ID and add event on that tag like this <select name="cars" id="cars" onChange="SelectRedirect()"></select>
now use JavaScript to achieve that. I'm using switch statement.
function SelectRedirect() {
switch (document.getElementById("cars").value) {
case "volvo":
window.location = "page";
break;
case "saab":
window.location = "login";
break;
default:
window.location = "../";
break;
}
}
<div>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" onChange="SelectRedirect()">
<option value="volvo">volvo</option>
<option value="saab">Saab</option>
</select>
</div>
The another way you can do that with onchange event.
<select onchange="window.location = this.value;">
<option value="">Your page</option>
<option value="page1.html">Page 1</option>
<option value="page2.html">Page 2</option>
<option value="page3.html">Page 3</option>
</select>