Change content based on select dropdown id in jquery
<p>I am trying to update content within divs based on a select box option.</p>

<p>If selected the id of the option should be used to display or hide the appropriate divs witin the area.</p>

<pre><code>&lt;select class=" outtaHere"&gt;
        &lt;option class="selected" value="australia_new_zealand_holidays"&gt; Australasia&lt;/option&gt;
        &lt;option value="central_america_and_caribbean"&gt; Central America &amp;amp; the Caribbean&lt;/option&gt;
        &lt;option value="europe"&gt; Europe&lt;/option&gt;
        &lt;option value="indian_subcontinent_holidays"&gt; Indian Subcontinent&lt;/option&gt;
        &lt;option value="north_central_asia"&gt; North &amp;amp; Central Asia&lt;/option&gt;
        &lt;option value="north_africa_middle_east"&gt; North Africa &amp;amp; Middle East&lt;/option&gt;
        &lt;option value="north_america"&gt; North America&lt;/option&gt;
        &lt;option value="polar_regions"&gt; Polar Regions&lt;/option&gt;
        &lt;option value="south_america"&gt; South America&lt;/option&gt;
        &lt;option value="south_east_asia"&gt; South East Asia&lt;/option&gt;
        &lt;option value="sub_saharan_africa"&gt; Sub Saharan Africa&lt;/option&gt;
         &lt;/select&gt;
</code></pre>

<p>All should be hidden unless one of the above is selected:</p>

<pre><code>&lt;div class="scroll-content"&gt;
  &lt;ul class="countrylist australia_new_zealand_holidays"&gt;
    &lt;li&gt;&lt;a href="countries/australia-holidays"&gt;Australia&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="countries/papua-new-guinea-holidays"&gt;Papua New Guinea&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="countries/new-zealand"&gt;New Zealand&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="countrylist central_america_and_caribbean"&gt;
    &lt;li&gt;&lt;a href="countries/costa-rica-holidays"&gt;Costa Rica&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="countrylist europe"&gt;
    &lt;li&gt;&lt;a href="countries/finland-holidays"&gt;Finland&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="countries/france-adventure-holiday"&gt;France&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="countrylist indian_subcontinent_holidays"&gt;
    &lt;li&gt;&lt;a href="countries/bhutan-holidays"&gt;Bhutan&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="countries/india-holidays"&gt;India&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="countries/nepal-adventure-holidays"&gt;Nepal&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="countries/sri-lanka-holidays"&gt;Sri Lanka&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>At the same time as the select box is chosen i need to update the following div with the value also like so:</p>

<pre><code>&lt;div class="desrarea optionvalue"&gt; 
</code></pre>
