Simulate clicks on options
<p>I have a code that selects an option after you clicked an element:</p>

<p>You can see the code <a href="http://jsfiddle.net/gMZGr/" rel="nofollow">here</a></p>

<pre><code>function setAsSelectedOption(referrerElement){
  var clickToOptionMap = {
        'click-object-1'  :  'fireaway',
        'click-object-2'  :  'groundearth',
        'click-object-3'  :  'watermelon',
        'click-object-4'  :  'catchwind'
  };
  var optionId = clickToOptionMap[referrerElement.id];
  var optionElement = document.getElementById(optionId);

  optionElement.selected = true;
};
</code></pre>

<p><br />
I'd like to run a code after this code. That code needs to simulate a click on the top option in the list and then clicks back on the last selected option.</p>

<p>Anyone know of such a script?</p>

<p><br /></p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Simulate clicks on options&lt;/title&gt;
&lt;/head&gt;

&lt;style type="text/css"&gt;
div
{
width:30px;
height:30px;
margin:4px;
cursor:pointer;
}

#click-object-1{background-color:#F00;}
#click-object-2{background-color:#0F0;}
#click-object-3{background-color:#00F;}
#click-object-4{background-color:#FF0;}
&lt;/style&gt;


&lt;body&gt;


&lt;form action=""&gt;

  &lt;fieldset&gt;

    &lt;ul style="list-style:none;"&gt;
      &lt;li&gt;
        &lt;select id="select_items_first" name="SelectItemsFirst"&gt;
          &lt;option value="choose"&gt;Please choose&lt;/option&gt;
          &lt;option id="fireaway" value="xjakgd"&gt;Fire&lt;/option&gt;
          &lt;option id="groundearth" value="yuygas"&gt;Earth&lt;/option&gt;
        &lt;/select&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;select id="select_items_second" name="SelectItemsSecond"&gt;
          &lt;option value="choosemore"&gt;Please choose&lt;/option&gt;
          &lt;option id="watermelon" value="piowqe"&gt;Water&lt;/option&gt;
          &lt;option id="catchwind" value="mnbvzi"&gt;Wind&lt;/option&gt;
        &lt;/select&gt;
      &lt;/li&gt;
    &lt;/ul&gt;

  &lt;/fieldset&gt;

&lt;/form&gt;

&lt;div id="click-object-1" onclick="setAsSelectedOption(this)"&gt;&lt;/div&gt;
&lt;div id="click-object-2" onclick="setAsSelectedOption(this)"&gt;&lt;/div&gt;

&lt;br /&gt;

&lt;div id="click-object-3" onclick="setAsSelectedOption(this)"&gt;&lt;/div&gt;
&lt;div id="click-object-4" onclick="setAsSelectedOption(this)"&gt;&lt;/div&gt;


&lt;script type="text/javascript"&gt;
function setAsSelectedOption(referrerElement){
  var clickToOptionMap = {
        'click-object-1'  :  'fireaway',
        'click-object-2'  :  'groundearth',
        'click-object-3'  :  'watermelon',
        'click-object-4'  :  'catchwind'
  };
  var optionId = clickToOptionMap[referrerElement.id];
  var optionElement = document.getElementById(optionId);

  optionElement.selected = true;
};
&lt;/script&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><br /></p>

<p><br /></p>

<p><em><strong></em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em></strong> UPDATE 2011-09-14 <strong><em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>****</strong> </p>

<p>I made a gif to show what I'd like to accomplish:</p>

<p><img src="http://i.stack.imgur.com/DpWd9.gif" alt="enter image description here"></p>
