Instant Dropdown Reaction

When someone selects an item from a dropdown list, the selection can instantly initiate an action. Examples:

1. Redirect the browser to another URL.

   This can serve as a navigation item. Instead of clicking on a link, the person selects an item from a dropbox.

   As soon as the selection is made, the browser is redirected to the URL of the selected item.

2. Set a cookie with the dropdown information.

   By setting a cookie, the browser can remember the information as different pages are viewed.

   The selected item might be a font size page design preference, the time zone the person is in, an item to be purchased or its size or color. Whatever the selection, the selected item is remembered in the cookie.

3. Spawn an alert if a certain selection was made.

   An example of use is a selection of a download. Most in the list are free but some need to be paid for.

   When a non-free selection is made, an alert lets them know that particular item requires payment.

The article has code for implementing each of the examples.

Common Elements

Each of the three examples have some common elements.

Here is a template with the common items. Each of the examples will use this template.

<select onchange="DownloadSelectionChanged(this.options[this.selectedIndex].value)">
<!-- List items here -->
</select>

<script type="text/javascript">
function DownloadSelectionChanged(value)
{
   // Function code here
}
</script>

The dropdown has an onchange attribute that calls the JavaScript function DownloadSelectionChanged() with the value of the list option that was selected. The function in the attribute is colored blue.

The function name in the JavaScript is also colored blue. It receives the value of the selected list item. The value can then be used by the JavaScript to do certain tasks, like the three examples.

Redirect the browser to another URL.

For automatically redirecting the browser to another URL when a list selection is made, the list option value needs to be a URL.

Here is a working example:

Here is the source code (notes below):

<select onchange="DownloadSelectionChanged(this.options[this.selectedIndex].value)">
<option value="">- Select -</option>
<option value="https://www.willmaster.com/create-form/">Form Creator</option>
<option value="https://www.willmaster.com/support/forum/">Public Support Forum</option>
<option value="https://www.willmaster.com/software/custom/">Custom Programming</option>
<option value="https://www.willmaster.com/software/">Off-the-shelf Software</option>
</select>

<script type="text/javascript">
function DownloadSelectionChanged(value)
{
   if(value.length) { location.href = value; }
}
</script>

Each list option's value is the URL to redirect the browser to. Any list items that aren't supposed to redirect the browser have a null value (like the first list item in the example).

The JavaScript function receives the value of the newly-selected list item. If the value has a length (isn't null), the browser is redirected to the URL contained in the value.

Set a cookie with the dropdown information.

To set a cookie when a list selection is made, the list option value needs to be the cookie's value. Here is a working example:

To see the result of using the dropdown, use whatever mechanism your browser provides to view cookies. (A stand-alone cookie viewer can be downloaded at the cookie control article.)

And here is the code for the above example (notes follow):

<select onchange="DownloadSelectionChanged(this.options[this.selectedIndex].value)">
<option value="">- Select color scheme -</option>
<option value="white on black">Gold</option>
<option value="black on white">Platinum</option>
</select>

<script type="text/javascript">
function DownloadSelectionChanged(value)
{
   CookieName = 'TestCookie';
   if(value.length) { document.cookie = CookieName + "=" + value + "; path=/"; }
}
</script>

Each list option's value is the value of the cookie to set when that item is selected. Non-cookie list items have a null value.

The JavaScript function receives the value of the newly-selected list item.

If the value has a length (isn't null), the cookie is set. The name of the cookie is specified in the JavaScript variable CookieName. The value of the cookie is the value of the list item as received from the dropdown.

Spawn an alert if a certain selection was made.

Suppose your form has a dropdown listing the titles of five downloads. Three are free and two need to be purchased.

When a download is selected and it happens to be one of the two that need to be purchased, an alert lets them know purchase will be required.

An example:

Notes follow the code:

<select onchange="DownloadSelectionChanged(this.options[this.selectedIndex].value)">
<option value="">- Select a Download -</option>
<option value="34 Recipes">The famous book of 34 recipes</option>
<option value="Fun Favors">5 Fun Hand-crafted Party Favors</option>
<option value="Weather">How to Protect Yourself from Destructive Weather</option>
<option value="RE Agent">3 Important Things to Consider When Selecting a Real Estate Agent</option>
<option value="Neighbor">Now to Be a Good Neighbor</option>
</select>

<script type="text/javascript">
function DownloadSelectionChanged(value)
{
   var Message = "Purchase details provided after form is submitted."
   switch(value)
   {
      case "RE Agent" : alert(Message); break;
      case "Neighbor" : alert(Message); break;
   }
}
</script>

The dropdown list items' values are an abbreviated version of the publication title. (Abbreviation is optional, the value can be whatever you want it to be.) When an item is selected, the value is sent to the JavaScript function.

When the JavaScript function receives the value from the dropbox, it tests the value with a switch statement. If the value matches a case test, an alert box is spawned containing the message specified as the Message variable.

Custom Reactions

Other things can be done when a dropdown list item is selected. Actually, anything JavaScript can do can be done.

To make a custom reaction, use the template code presented first in this article:

• Replace <!-- List items here --> with your dropdown list items.

• Replace // Function code here with your custom JavaScript code.

When tests prove it works OK, you have a custom instant dropdown reaction.

Will Bontrager