title: build a list with jQuery
body: <p>I have a drop-down menu:</p>
  
  <pre><code>&lt;select id="mySelect"&gt;
      &lt;option&gt; select
      &lt;option value="fruits"&gt; fruits
      &lt;option value="flowers"&gt; flowers
  &lt;/select&gt;
  </code></pre>
  
  <p>When I select one of the options I need to build an un-ordered list from an array that I have:</p>
  
  <pre><code>var myFruits = ["apple","orange","banana"];
  var myFlowers= ["rose","tulip","carnation"];
  </code></pre>
  
  <p>... and have the option become a header of the list, something like:</p>
  
  <pre><code>&lt;ul&gt;fruits
      &lt;li&gt;apple&lt;/li&gt;
      &lt;li&gt;orange&lt;/li&gt;
      &lt;li&gt;banana&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I also need to allow to have multiple select, i.e. User can select both options from the drop-down. I'm trying to use jQuery but have not gone too far:</p>
  
  <pre><code>$("#mySelect").click(function() {
      if($(this).val() == "fruits") {
          $("#myResults").append("&lt;ul&gt;"+$(this).val()+"&lt;/ul&gt;");
      }
  });
  </code></pre>