title: Drop down list - display div when clicking an option
body: <p>You must write a function that 'shows' the corresponding part of the form depending on what the user has selected. For example, if 'Pizza' is selected, the div #section2 with the question about Pizza type should be shown. </p>
  
  <p>This is part of the html code</p>
  
  <pre><code>&lt;form id="survey" action="#" method="post"&gt;
  
  &lt;div id="section1"&gt;
      &lt;label for="food"&gt;What is your favourite type of food?&lt;/label&gt;
      &lt;select id="food" onchange="selection()"&gt;
          &lt;option value="pizza"&gt;Pizza&lt;/option&gt;
          &lt;option value="mex"&gt;Mexican&lt;/option&gt;
          &lt;option value="thai"&gt;Thai&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;div id="section2"&gt;
      What is your favourite type of pizza?&lt;br&gt;
      &lt;label for="hawaiian"&gt;Hawaiian&lt;/label&gt;&lt;input type="radio" id="hawaiian"&gt;
      &lt;label for="supreme"&gt;Supreme&lt;/label&gt;&lt;input type="radio" id="supreme"&gt;
      &lt;label for="vegetarian"&gt;Vegetarian&lt;/label&gt;&lt;input type="radio" id="vegetarian"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How would i write a javascript function so that when I click the option pizza, it will display section 2? I'm a complete javascript novice so any help would be great.</p>