Link Selects Dropdown List Item

This tutorial describes how JavaScript can be used to select a dropdown list option when a link is clicked.

The link specifies the option value. The JavaScript selects the option from the dropdown list with that value. Option values may be different than the option text visible in the dropdown list.

Instead of changing selections by option number, the JavaScript does so by option value.

Doing it by option value, the option can be anywhere in the dropdown list. Knowing its position in the options list isn't required.

In the example, click on a option-value link to change the dropdown selection.

The Tutorial

The JavaScript needs no customization. But the HTML needs several things noted.

Let's do the JavaScript first.

<script type="text/javascript">
function SelectByValue(id,val)
{
   var dropdown = document.getElementById(id);
   for( var i=0; i<dropdown.length; i++ )
   {
      if( dropdown[i].value == val ) { dropdown[i].selected = true; }
      else { dropdown[i].selected = false; }
   }
}
</script>

The SelectByValue() function accepts the id value of the select dropdown field and the option value that shall be selected.

As the function checks each option that the select dropdown field has, it selects every option with a value that equals what the function was provided. Otherwise, the option is de-selected.

If the function finds no option value that equals what it was provided, no option will be selected. When none is selected, browsers generally default to the first option.

If more than one option value equals what the function was provided, each will be selected. Browsers generally default to the last option that is selected.

Here is the HTML.

<!-- The select dropdown field. -->
<select id="my-dropdown">
<option value=""></option>
<option value="red">Color Red</option>
<option value="blue">Color Blue</option>
<option value="green">Color Green</option>
<option value="yellow">Color Yellow</option>
</select>

<!-- The links. -->
<a href="javascript:SelectByValue('my-dropdown','red')">Red</a>
<a href="javascript:SelectByValue('my-dropdown','blue')">Blue</a>
<a href="javascript:SelectByValue('my-dropdown','green')">Green</a>
<a href="javascript:SelectByValue('my-dropdown','yellow')">Yellow</a>
<a href="javascript:SelectByValue('my-dropdown','')">(blank)</a>

In the HTML code, notice the select dropdown field's id="my-dropdown" and also the 'my-dropdown' parameter for the link function calls. If the select dropdown field's id value changes, then the select id value in the links also need to be changed.

Notice also the option values. They're colored red in the select dropdown field and also colored red in the link function call parameter. Each link causes a selection to be made in the dropdown where the selection's option value equals the function parameter value.

Clicking on the link with href="javascript:SelectByValue('my-dropdown','yellow')" causes the id="my-dropdown" select dropdown <option value="yellow"> to be selected.

With the above, you have the tools to code your own custom implementation.

For reference, here is the complete source code of the example.

<div style="border:1px solid #ccc; border-radius:.9px; padding:1em 1em 0 1em; display:table;">

<div style="float:left; margin:0 1em 1em 0;">
<div class="underline">Option value links</div>
<div style="margin-top:.5em;"><a href="javascript:SelectByValue('my-dropdown','red')">Red</a></div>
<div style="margin-top:.5em;"><a href="javascript:SelectByValue('my-dropdown','blue')">Blue</a></div>
<div style="margin-top:.5em;"><a href="javascript:SelectByValue('my-dropdown','green')">Green</a></div>
<div style="margin-top:.5em;"><a href="javascript:SelectByValue('my-dropdown','yellow')">Yellow</a></div>
<div style="margin-top:.5em;"><a href="javascript:SelectByValue('my-dropdown','')">(blank)</a></div>
</div>

<div style="float:left; margin:0 1em 0 0;">
<div class="underline">Dropdown</div>
<select id="my-dropdown" style="margin-top:1em;">
<option value=""></option>
<option value="red">Color Red</option>
<option value="blue">Color Blue</option>
<option value="green">Color Green</option>
<option value="yellow">Color Yellow</option>
</select>
</div>

<div style="clear:left;"></div>
</div>

<script type="text/javascript">
function SelectByValue(id,val)
{
   var dropdown = document.getElementById(id);
   for( var i=0; i<dropdown.length; i++ )
   {
      if( dropdown[i].value == val ) { dropdown[i].selected = true; }
      else { dropdown[i].selected = false; }
   }
}
</script>

Note that the link to change the dropdown selection isn't required to be a text link. It can be an image link, or an image/text combination.

(This article first appeared in Possibilities newsletter.)

Will Bontrager