Dropdown Links

A dropdown is a special form field created with the select tag. When the dropdown is tapped, it reveals a list of options to select from. An example dropdown is further below.

A dropdown selection can act like a link, which is what this article is about. In the source code further below, you'll see that each option has a URL for a value.

When an option is selected, the browser is sent to the option's URL value. The URL would be to another web page or to a different section of the current web page.

To implement, give the select field this onchange attribute.

onchange="if(this.options[this.selectedIndex].value){location.href=this.options[this.selectedIndex].value}"

The this.options[this.selectedIndex].value part (in both places) is code to determine the URL that the browser is being sent to. The URL is determined by the value of the option the person selected.

The location.href part is what sends the browser to the new URL.

I'll provide an example and its source code. Then talk a bit about it.

Here is the source code for the example.

<select onchange="if(this.options[this.selectedIndex].value){location.href=this.options[this.selectedIndex].value}">
<option value="">- Select a location -</option>
<option value="#testing">The element with id="testing"</option>
<option value="https://spamfreeform.com">The spamfreeform.com website</option>
<option value="/">This site's home index page</option>
</select>

As mentioned earlier, the select field has an onchange attribute. The attribute sends the browser to the link provided by the selected option.

Each option has a value that is the link (except the first one, with an empty value). It also has dropdown text, which the example uses to indicate what type of link the value contains.

The #testing fragment link scrolls the browser window to the div or other HTML tag that has an id="testing" attribute. (The first paragraph in this article has the <p id="testing"> HTML tag.)

The https://spamfreeform.com absolute link takes the browser to the indicated website.

And the / relative link takes the browser to the index page of the current domain.

I used to see many dropdown links during the earlier part of my internet experience. Their popularity seems to have dwindled. Now, you can be one of the site owners who reintroduce dropdown links to the later generation of interneters.

(This content first appeared in Possibilities newsletter.)

Will Bontrager