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>
<script language="javascript">
function changevalue(obj)
{
Select_Value_Set("DDvehAttr","mainForm",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>
and here is my drop down menu which is within a form called mainForm
is not working in your file. My guess is maybe the FormName is not matching up or something. For whatever reason SelectObject is not getting set is what I’m thinking so nothing will work after that. I would put in this line of code right before the eval line to confirm if SelectObject is getting set properly:
alert(SelectObject);
If the alert shows null then the object is not getting set.
I didn’t test my example in FireFox but apparently the problem is that “name” is not a valid attribute of the image tag. So if we instead use ID which is supported it will work in both FireFox and IE. Here’s my revised code that works in both browsers:
<html>
<head>
<script language="javascript">
function changevalue(obj)
{
Select_Value_Set("cboDropdown","frmMain",obj.id);
}
/* 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 id="choice1" onclick="changevalue(this);" />
<img id="choice2" onclick="changevalue(this);" />
<form name="frmMain">
<select name="cboDropdown">
<option value="choice1">Choice1</option>
<option value="choice2">Choice2</option>
</select>
</form>
</body>
</html>
Hi Taco, you are correct. When I use the alert it shows ‘undefined’
I have no idea why this is happening because the form is definately called mainForm and the drop down is definately called DDvehAttr
Here is my code again, is there any reason why it cannot locate my drop down (aside from the names being incorrect?)
<script language="javascript">
function changevalue(obj)
{
Select_Value_Set("DDvehAttr","mainForm",obj.id);
}
/* 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 + ';');
alert(SelectObject);
for(index = 0; index < SelectObject.length; index++) {
if(SelectObject[index].value == Value)
SelectObject.selectedIndex = index;
}
}
</script>
My code and HTML with your names plugged in works fine. Here is my updated code:
<html>
<head>
<script language="javascript">
function changevalue(obj)
{
Select_Value_Set("DDvehAttr","mainForm",obj.id);
}
/* 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 + ';');
alert(SelectObject);
for(index = 0; index < SelectObject.length; index++) {
if(SelectObject[index].value == Value)
SelectObject.selectedIndex = index;
}
}
</script>
</head>
<body>
<img id="choice1" onclick="changevalue(this);" width="10" height="10"/>
<img id="choice2" onclick="changevalue(this);" width="10" height="10"/>
<form name="mainForm">
<select name="DDvehAttr">
<option value="choice1">Choice1</option>
<option value="choice2">Choice2</option>
</select>
</form>
</body>
</html>
I tested this in both IE and Chrome and it worked fine. If you want to post your HTML that contains the images and the dropdown box I will certainly be glad to take a look. If you don’t want to post it you can PM it to me.
I’d suggest that you scrap that old style code that’s not working in your situation, and start again.
This code that I’ve come up with loops through each of the options, and uses the option value to attach an onclick event to the matching id attribute (on the image) to show that option.
Instead of using an inline HTML event attribute, this returned function will be attached to each image instead:
function selectOption(option) {
return function () {
option.parentNode.selectedIndex = option.index;
};
}
Here’s how that function is added to each image - by looping through each option of the select element.
var form = document.getElementById('mainForm'),
select = form.elements.DDvehAttr,
option,
i;
for (i = 0; i < select.options.length; i += 1) {
option = select.options[i];
document.getElementById(option.value).onclick = selectOption(option);
}
Some test code that demonstrates this can be found at http://jsfiddle.net/pmw57/MFZnp/
Note: Ensure that your script is at the end of the body, just before the </body> tag
Yes indeed, we can use a variable, and guard against situations where no element can be found.
var form = document.getElementById('mainForm'),
select = form.elements.DDvehAttr,
option,
el,
i;
for (i = 0; i < select.options.length; i += 1) {
option = select.options[i];
el = document.getElementById(option.value);
if (el) {
el.onclick = selectOption(option);
}
}