title: Simulate clicks on options
body: <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 noreferrer">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>************************************ UPDATE 2011-09-14 ************************************ </p>
  
  <p>I made a gif to show what I'd like to accomplish:</p>
  
  <p><img src="https://i.stack.imgur.com/DpWd9.gif" alt="enter image description here"></p>