I was wondering how I can change the selected item in a drop down menu, from an onmouseover event somewere else on the page. I want when a user scrolls over various color swatches the selected menu item will change to that color...How would I go about doing this....

Elladi

Include this function in your page:

function changeDropDownValue(val, dropdown)
{
  for(var i=0;i<dropdown.options.length;i++)
  {
    if(dropdown.options[0].value = val)
    {
      dropdown.selectedIndex = i;
      return true;
    }
  }
  return false;
}

Make your color palette like this:

<style type='text/css'>
td {width:10px;height:10px;font-size:10px;}
</style>
<table>
 <tr>
  <td style='background-color:#FF0000' onmouseover='changeDropDown(this.backgroundColor,d ocument.getElementById("sel")'> </td>
  <td style='background-color:#00FF00' onmouseover='changeDropDown(this.backgroundColor,d ocument.getElementById("sel")'> </td>
  <td style='background-color:#0000FF' onmouseover='changeDropDown(this.backgroundColor,d ocument.getElementById("sel")'> </td>
 </tr>
</table>

And then your select box like so:

<select id='sel'>
 <option value='#FF0000'>red</option>
 <option value='#00FF00'>green</option>
 <option value='#0000FF'>blue</option>
</select>

Add the colors you need following suit, and this should work as you described.

-Snib - http://www.snibworks.com
Where will you be in 100 years?

That code won't work as posted - needs another ")" (without quotes) on the ends of those changeDropDown calls - at the end of ("sel"), but before the last single quote. Otherwise, it looks like it's taking the "this.backgroundcolor" of the area "mouse-overed" and inputting that as the value the select box should show. Nicely done.

Where does that function code go? In the header? When I put it in the header, I get the colors on top of the dropdown menu instead of inside the dropdown menu. How do I get it inside?