Image Click Selects Dropdown Item

Sometimes, it's just easier to click on an image than it is to select an item from a dropdown list.

For one reason, it's one click instead of two. For another, images generally are instantly recognized and text needs to be read before being understood.

Still, some people are more comfortable with text than with images and would prefer to use the dropdown list.

I'll describe how to provide your site visitors with a choice — click on image or use a dropdown list.

Below is an example. Clicking on an image will select the item in the dropdown list.

The dropdown list also works as expected. It's a regular select form field and can be submitted just like any other dropdown list.

Select the wallpaper of your choice by clicking on it.
Or, you can select from the dropdown list.

Select here or click a pattern above. Fleur Nine Patch Pink Gate Sand Dollar Sandria Blue Wheel

Implementing the Functionality

Implementation consists of three parts:

1. The dropdown list.

   A dropdown list created with an HTML select tag, as is normally the case.

2. The images to click.

   These can be any images that can be displayed on a web page with an img tag.

3. The JavaScript.

   The JavaScript is copy and paste — no customization required.

1. The dropdown list.

The dropdown list select tag needs an id value. The img tag will send the id value to the JavaScript so the JavaScript knows which dropdown list is to be updated. (The image and JavaScript implementations sections are further below.)

Each option in the dropdown list needs a value attribute. The img tag also sends the value attribute to the JavaScript so the JavaScript can select the correct list item.

Here is the select form field for the dropdown list of the above example.

<select id="design-dropdown">
<option>Select here or click a pattern above.</option>
<option value="Fleur">Fleur</option>
<option value="Nine Patch">Nine Patch</option>
<option value="Pink Gate">Pink Gate</option>
<option value="Sand Dollar">Sand Dollar</option>
<option value="Sandria">Sandria</option>
<option value="Blue Wheel">Blue Wheel</option>
</select>

For reference in the next implementation section, the id value of the select tag is colored red and the option values are colored blue.

Put the dropdown code into the web page source code where it is to be published.

2. The images to click.

Images need an onclick attribute. Example:

onclick="SelectADropdownItem('design-dropdown','Fleur')"

The SelectADropdownItem() function call has two parameters:

1. The id value of the select tag of the dropdown the image click refers to. In the example, the id value is 'design-dropdown'

2. The value of the option of the dropdown list item to select when the image is clicked. You'll see the values of each option in the source code of the example dropdown list in the text box further above.

Here is the HTML code used for publishing the example images. The id value of the select tag is colored red and the option values are colored blue.

<img 
   onclick="SelectADropdownItem('design-dropdown','Fleur')" 
   src="//www.willmaster.com/library/images/ImageClickSelects/flower.jpg" 
   style="border:none; height:120px; width:94px; cursor:pointer; margin:0 5px 0 5px;" 
   alt="Flower design">
<img 
   onclick="SelectADropdownItem('design-dropdown','Nine Patch')" 
   src="//www.willmaster.com/library/images/ImageClickSelects/ninepatch.jpg" 
   style="border:none; height:120px; width:94px; cursor:pointer; margin:0 5px 0 5px;" 
   alt="Nine patch design">
<img 
   onclick="SelectADropdownItem('design-dropdown','Pink Gate')" 
   src="//www.willmaster.com/library/images/ImageClickSelects/pinkgate.jpg" 
   style="border:none; height:120px; width:94px; cursor:pointer; margin:0 5px 0 5px;"
   alt="Pink gate design">
<br>
<img 
   onclick="SelectADropdownItem('design-dropdown','Sand Dollar')" 
   src="//www.willmaster.com/library/images/ImageClickSelects/sanddollar.jpg" 
   style="border:none; height:120px; width:94px; cursor:pointer; margin:0 5px 0 5px;"
   alt="Sand dollar design">
<img 
   onclick="SelectADropdownItem('design-dropdown','Sandria')" 
   src="//www.willmaster.com/library/images/ImageClickSelects/sandria.jpg" 
   style="border:none; height:120px; width:94px; cursor:pointer; margin:0 5px 0 5px;"
   alt="Sandria design">
<img 
   onclick="SelectADropdownItem('design-dropdown','Blue Wheel')" 
   src="//www.willmaster.com/library/images/ImageClickSelects/wheel.jpg" 
   style="border:none; height:120px; width:94px; cursor:pointer; margin:0 5px 0 5px;"
   alt="Blue wheel design">
   

When an image is clicked, it calls the JavaScript function SelectADropdownItem() with the id value of the dropdown to affect and the value of the list option to select.

Put the HTML code for images into the web page source code where it is to be published.

3. The JavaScript.

Here is the JavaScript. No customization required.

<script type="text/javascript"><!--
/* 
   Image Click Selects Dropdown Item
   Version 2.0
   May 19, 2014

   Version 1.0 created June 4, 2012
   Version 2.0 removes some complexity and allows multiple dropdowns.

   Will Bontrager Software, LLC
   https://www.willmaster.com/
   Copyright 2012,2014 Will Bontrager Software, LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software, LLC grants 
   you a royalty free license to use or 
   modify this software provided this 
   notice appears on all copies. 
*/

// No customization required.

function SelectADropdownItem(id,val)
{
   var d = document.getElementById(id);
   for( var i=0; i<d.length; i++ )
   {
      if( d[i].value == val ) { d[i].selected = true; }
      else { d[i].selected = false; }
   }
}
//--></script>

The JavaScript may be pasted into the source code of your web page anywhere that JavaScript can run. It may also be imported from an external file.

That completes the implementation.

You now have a set of images that select an item in a dropdown when one of the images is clicked.

Multiple Image-Dropdown Sets

The same JavaScript can be used for two or more image-dropdown sets. To implement multiple image-dropdown sets:

1. Put each set's code for the images and their associated dropdown on the page.

2. Each dropdown's select tag needs a unique id value.

3. With each image, adjust the onclick function SelectADropdownItem()'s two parameters to work with the dropdown it's associated with.

Whether one or more image-dropdown sets, your site visitors can now click an image instead of making a selection from the dropdown.

Will Bontrager