Image onclick change drop down value

JavaScript
1
Edit:

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:


<html>
	<head>
		<script language="javascript">
			
		function changevalue(obj)
		{
			Select_Value_Set("cboDropdown","frmMain",obj.value);			
		}

	/* This script and many more are available free online at
	The JavaScript Source :: http://javascript.internet.com
	Created by: Francis Cocharrua :: http://scripts.franciscocharrua.com/ */
	
	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;
	   }
	}
			
		</script>		
	</head>
<body>
	
<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>
</select>
</form>

</body>
</html>

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?

2

Hi,

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

3

Yes, that’s correct.

4

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
    console.log(localStorage.getItem('hello'));
  
    // delete
    localStorage.removeItem('hello');
}

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.