Image onclick change drop down value


continued from an older thread

[QUOTE=tacodomains;4846795]Here’s an example I just wrote that should accomplish what you are trying to do. I picked up a function already available for setting the dropdown box value but had to modify it to use the form name. I tested this in IE8. Paste this code into a file and save as .html and you can then point to it in your browser to test:

		<script language="javascript">
		function changevalue(obj)

	/* This script and many more are available free online at
	The JavaScript Source ::
	Created by: Francis Cocharrua :: */
	function Select_Value_Set(SelectName,FormName,Value) {
	  eval('SelectObject = document.' + FormName + '.' + SelectName + ';');
	  for(index = 0; 
	    index < SelectObject.length; 
	    index++) {
	   if(SelectObject[index].value == Value)
	     SelectObject.selectedIndex = index;
<img value="choice1" onclick="changevalue(this);" />
<img value="choice2" onclick="changevalue(this);" />

<form name="frmMain">
<select name="cboDropdown">
	<option value="choice1">Choice1</option>
	<option value="choice2">Choice2</option>


If you have any questions let me know.[/QUOTE]

Hi tacodomains,

How would you go about coding this if say, you had the drop down on one page and the images on another?


Are you asking how to click an image on page a, then have that set the value for a select element on page b?

Yes, that’s correct.

Well, to pass any kind of value between two pages you would need to use some kind of storage - either client or server-side.

One way might be HTML5’s storage API.
It is well supported and light-weight.

It’s basic syntax is as follows:

// is localStorage available?
if (typeof window.localStorage != 'undefined') {
    // store
    localStorage.setItem('hello', 'Hello World!');
    // retrieve
    // delete

In your particular case, you would need to set a key/value pair when the image is clicked, then retrieve it when the second page loads and set the selected index of the select element accordingly.