How to add the links inside the select box

We all know that we can not add the links inside the <option> in the select box. Today I gonna share one simple trick with pure javascript.

Let’s say you want to add the links inside the <option> like this.

<select class="menus">
    <option value="Home"><a href="home.php">Home</a></option>
    <option value="About"><a href="about.php">About</a></option>
    <option value="Contact"><a href="contact.php">Contact</a></option>
</select>

Of cause, it is not working.

Here is the correct one with the javascript.

<select class="menus" onchange="location = this.value;">
 <option value="Home.php">Home</option>
 <option value="About.php">About</option>
 <option value="Contact.php">Contact</option>
</select>

What we are doing here. We just add the links into the value attribute. Then we add the onchange event. Finally, we add the javascript code for linking to the URL you want.

This method is very simple and we don’t need to include any plugins at all.