Use drop down to show/hide div
<p>I am using a drop down to show/hide divs based on the selected option. 
The show/hide is working however I need to hide only divs that are related to each individual drop-down rather than each time hiding all divs on the page. </p>

<p>How can I select only the divs related to each individual drop-down?</p>

<p><a href="http://jsfiddle.net/infatti/fj63g/7/" rel="nofollow">http://jsfiddle.net/infatti/fj63g/7/</a></p>

<pre><code>&lt;select id="dropDown"&gt;
    &lt;option&gt;Choose&lt;/option&gt;
    &lt;option value="div1"&gt;Show Div 1&lt;/option&gt;
    &lt;option value="div2"&gt;Show Div 2&lt;/option&gt;
&lt;/select&gt;

&lt;div  id="div1" class="drop-down-show-hide"&gt;div 1&lt;/div&gt;
&lt;div  id="div2" class="drop-down-show-hide"&gt;div 2&lt;/div&gt;

&lt;hr /&gt;

&lt;select id="dropDown2"&gt;
    &lt;option&gt;Choose&lt;/option&gt;
    &lt;option value="div3"&gt;Show Div 3&lt;/option&gt;
    &lt;option value="div4"&gt;Show Div 4&lt;/option&gt;
&lt;/select&gt;

&lt;div  id="div3" class="drop-down-show-hide"&gt;div 3&lt;/div&gt;
&lt;div  id="div4" class="drop-down-show-hide"&gt;div 4&lt;/div&gt;


$('.drop-down-show-hide').hide();

$('#dropDown').change(function(){

    $('.drop-down-show-hide').hide();
    $('#' + this.value).show();

});

$('#dropDown2').change(function(){

    $('.drop-down-show-hide').hide();
    $('#' + this.value).show();

});
</code></pre>
