Instant Action When Dropdown Selection Is Made

Someone makes a selection from a dropdown list and an action occurs. It occurs immediately.

What happens can be pretty much anything that you can code with JavaScript — examples are redirecting to another web page, initiating a download of the selected option, and setting a cookie with a hat size selection for a shopping cart.

I'll show you how to make something happen.

(The Dropdown Updates Another Dropdown is a specialized application of the something-happens-when-a-selection-is-made idea.) It may be perfect for a project of yours.

But as a tutorial with a generic approach, this article explains how to use the skill for a variety of situations.

There are two parts to this instant-action functionality.

1. The onchange attribute in the HTML select tag. The attribute sends information to the JavaScript whenever a dropdown list selection has changed.

2. The JavaScript. The JavaScript does whatever action you code it to do, probably something related to the dropdown list option that was selected.

Code Overview

Here is an overview of the code. Detailed information follows.

The HTML select tag contains this attribute:

onchange="MyJavaScript(this)"

When a new selection is made, the onchange attribute sends the identification of the dropdown field to the MyJavaScript function.

The MyJavaScript function then does whatever you code it to do.

function MyJavaScript(dropdown)
{
    // Your code to make something happen.
}

With the identification of the dropdown field, the function can determine the value and other information of the selected dropdown list option.

A Live Example

This is a simple example. When an option is selected, an alert box launches with the option's value and the text of the option.

FYI, some browsers are so quick with the response that the alert spawns before the dropdown visually changes its selection.

The Live Example's Code — A Tutorial

The following includes the technical details of the process. Once you understand the process, though, you're in position to know what you're doing when you code your own dropdown functions.

The live example contains every element of the instant-action functionality except any custom code you might want to change or add to the JavaScript.

First, here is the source code for the dropdown (which is a select form field).

<select onchange="MyJavaScript(this)">
<option value="">Select One</option>
<option value="path">A path</option>
<option value="highway">On the highway</option>
<option value="dirt">Country dirt road</option>
<option value="trail">Secluded game trail</option>
</select>

MyJavaScript is the name of the function called when someone selects a new option from the dropdown. The word this in the function parameter (just the word, no quotation marks) contains information about the select form field that the JavaScript function can use.

The JavaScript function does all the work.

<script type="text/javascript">
function MyJavaScript(dropdown)
{
    var option_value = dropdown.options[dropdown.selectedIndex].value;
    var option_text = dropdown.options[dropdown.selectedIndex].text;
    alert('The option value is "' + option_value + '"\nand the text is "' + option_text + '"');
}
</script>

In all places it occurs, the name dropdown contains the information the select field's onchange attribute sends to the MyJavaScript function. It may be any other name, dpdn for example. The name dropdown is used for clarity.

Now, let's look at how information about the selected option is obtained for the JavaScript to use. The first line of code in the JavaScript function is used for illustration.

var option_value = dropdown.options[dropdown.selectedIndex].value;

The var option_value = part specifies the variable that a value will be assigned to. The rest of the code is the JavaScript accessing the selected option to copy the value.

dropdown.options[dropdown.selectedIndex].value;

dropdown.selectedIndex gives the JavaScript function a number. The number tells the JavaScript which option of the dropdown was selected. The first option of the dropdown is number 0, the second is 1, and the numbering is sequential to the last listed option.

When the selected option number is known, information can be obtained from the option. Here is a visualization.

dropdown.options[…].value;

Imagine the elipsis being the number of the selected option. Using that number, the JavaScript obtains the selected option's value using value.

The variable option_value now contains the value of the selected option.

In the second line of the MyJavaScript function, similar to the above explanation, the variable option_text is assigned the selected option's visible text using text:

var option_text = dropdown.options[dropdown.selectedIndex].text;

The third line of the code in the MyJavaScript function causes the alert box to display the values it obtained from the selected option.

That third line can be replaced with any JavaScript code you want to run immediately when a dropdown selection is made. Your code may utilize none, one, or both option_value and option_text to do its job.

Instant-action Code Examples

The line in the JavaScript function that launches an alert box, in the previous section of this article, can be replaced. Here are some examples of functionality it can be replaced with.

The examples are provided as ideas of what can be done.

The code was tested. But this article tutorial does not extend to how each example works.

▷ Setting a cookie with the dropdown option value and text.

function MyJavaScript(dropdown)
{
    var option_value = dropdown.options[dropdown.selectedIndex].value;
    var option_text = dropdown.options[dropdown.selectedIndex].text;
    document.cookie = "NameOfCookie=" + encodeURIComponent(option_value+":"+option_text);
}

▷ Redirect the browser to a different location (assuming the dropdown option values are URLs).

function MyJavaScript(dropdown)
{
    var option_value = dropdown.options[dropdown.selectedIndex].value;
    location.href = option_value;
}

▷ Initiating a download by redirecting to a download script (assuming the dropdown values are names of files to download).

function MyJavaScript(dropdown)
{
    var option_value = dropdown.options[dropdown.selectedIndex].value;
    location.href = "https://example.com/downloadscript.php?file=" + option_value;
}

Knowing how to use JavaScript for accessing information of an option selected in a dropdown can be rewarding. You know what you are doing.

With that skill, you are in a position to apply this technique in any number of useful ways.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager