title: Change the content of a div based on selection from dropdown menu
body: <p>Is there a simple way, using JavaScript, to dynamically show/hide content in a <code>&lt;div&gt;</code> based on the users selection from a drop down menu? For example, if a user selects <code>option 1</code> then I would like <code>&lt;div&gt;</code> 1 to be displayed and all other <code>&lt;div&gt;</code>s to be hidden.</p>
  
  <p>EDIT: Example <code>HTML</code> Setup</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;select&gt;
  &lt;option&gt; Option 1&lt;/option&gt;
  &lt;option&gt; Option 2&lt;/option&gt;
  &lt;option&gt; Option 3&lt;/option&gt;
  &lt;select&gt;
  
  &lt;div id="content_1" style="display:hidden;"&gt;Content 1&lt;div&gt;
  &lt;div id="content_2" style="display:hidden;"&gt;Content 2&lt;div&gt;
  &lt;div id="content_3" style="display:hidden;"&gt;Content 3&lt;div&gt;
  </code></pre>