Dynamic Dropdown Box from Selected Image

Question: I have seen dynamic dropdown boxes that change based on a selection in another dropdown box, but I would like to populate the dropdown box based on a click on an image. For example, the user clicks on a picture of a product they want, and a dropdown box automatically changes to show a list of options available for that product. We don't have any database technology set up on our server, so the options will have to be stored in arrays.
Colin Klotzbach

Answer: Here is an example of a form where the content of the dropdown box is dependent on which of three images is selected and clicking on the button will display an alert showing the value associated with the selected entry in the dropdown box. Note that while this works in Internet Explorer, Netscape (both 4 and 6+), and Opera 6+, it does not populate the dropdown box in Opera 5 so you may want to advise your visitors of that.

1 2 3


The example form is coded as follows:

<form name="myform"><div class="centre">
<img onclick="setOptions('
1');" src="img/pic1.gif" border="0" alt="1">
<img onclick="setOptions('
2');" src="img/pic2.gif" border="0" alt="2">
<img onclick="setOptions('
3');" src="img/pic3.gif" border="0" alt="3"><br />
<select name="opttwo" size="1">
<option value=" " selected="selected">
Please select one of the options above first</option>
 input type="button" name="go" value="Value Selected"


The onclick function on the images calls a javascript function called setOptions and passes it the value of the option selected in the first dropdown box. I've given the options values of 1, 2, and 3 but you can use whatever values you like and include as many options as you like.

The javascript function needs to be included in the head section of your page in order for it to work. Here is the example code:

 function setOptions(chosen) {
var selbox = document.myform.opttwo;
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option(
'Please select one of the options above first',' ');
if (chosen == "
1") {
  selbox.options[selbox.options.length] = new Option(
'first choice - option one','oneone');
  selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
if (chosen == "2") {
  selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
  selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
if (chosen == "3") {
  selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
  selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');

All that you need to do to get this function to populate the dropdown box with your desired values for each of the values associated with your images is to repeat the if statement checking which entry was chosen for all of the different values that can be selected in your first dropdown box. Within each of these you have one selbox.options assignment statement for each value that you want to appear in the second dropdown box (I have included two options in each built you can have as many as you like). The first entry in the option field on the right is the literal that you want to appear as a selectable value in the dropdown box and the second entry is the value that you want to assign to the particular selection.

I have included a button at the end of the form that when clicked will display the value assigned by the dropdown box just so you can see which value it is set to with the various combinations of selections in the two dropdown boxes. You don't need to include the button in your form but the code does show you how to test the value of the second dropdown box.

You can call your form whatever you want, just substitute its name wherever you see myform in the above example. Similarly you can change the name of the dropdown box to whatever you like by substituting for opttwo everywhere it appears.

Note that this is the same javascript function as on my Dynamic Dropdown Box page, it is just being called a different way. Also note that the images use ordinary img tags and not input tags with type=image as the latter will reload the page when clicked on which will revert the dropdown box back to its original values.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow