title: Show hide div element onselect option
body: <p>Here is options (option1 and option2). If option1 is selected, the <code>&lt;div id="aa"&gt;</code> and <code>&lt;div id="bb"&gt;</code> should be showed and on selecting option2, <code>&lt;div id="bb"&gt;</code> and <code>&lt;div id="cc"&gt;</code> should be showed. how to do it using javascript?       </p>
  
  <pre><code>&lt;select&gt;
  &lt;option&gt;option1&lt;/option&gt;
  &lt;option&gt;option2&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="aa"&gt;
  &lt;table width="100%" border="0" style="text-align:center;"&gt;
  &lt;tr&gt;&lt;td&gt;Table 1&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;&lt;/div&gt;
  
  &lt;div id="bb"&gt;
  &lt;table width="100%" border="0" style="text-align:center;"&gt;
  &lt;tr&gt;&lt;td&gt;Table 2&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;&lt;/div&gt;
  
  
  &lt;div id="cc"&gt;
  &lt;table width="100%" border="0" style="text-align:center;"&gt;
  &lt;tr&gt;&lt;td&gt;Table 3&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;&lt;/div&gt;
  </code></pre>