Simulate clicks on options

JavaScript
1

For example, if you click <div id=“click-object-2”></div> the option will switch to Earth, after that to Please choose, and finally back to Earth again.

I made a gif to show what I’d like to accomplish (click on image to see gif in action):

Anyone know a Javascript that can do this?


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

<style type="text/css">
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;}
</style>


<body>


<form action="">

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

</form>

<div id="click-object-1"></div>
<div id="click-object-2"></div>

<br />

<div id="click-object-3"></div>
<div id="click-object-4"></div>


</body>
</html>