title: Show/hide div select multiple
body: <p>I have the following code: <a href="http://jsfiddle.net/tucuta/pvvmvdpg/" rel="nofollow">http://jsfiddle.net/tucuta/pvvmvdpg/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#mySelect").change(function(){
    $("#div1").fadeIn("fast")[ ($(this).val() == 'value1') ? 'show' : 'hide' ]();
    $("#div2").fadeIn("fast")[ ($(this).val() == 'value2') ? 'show' : 'hide' ]();
  });
  
  $("#mySelect").change();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;select id="mySelect" multiple="multiple"&gt;
    &lt;option value="value1"&gt;First&lt;/option&gt;
    &lt;option value="value2"&gt;Second&lt;/option&gt;
    &lt;option value="value3"&gt;Third&lt;/option&gt;
    &lt;option value="value4"&gt;Fourth&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="div1"&gt;Div 1&lt;/div&gt;
  &lt;div id="div2"&gt;Div 2&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The code works fine if it is for a normal select, but if it is for a multiple select not working.</p>
  
  <p>If I select for example first shows me div 1, but if I select first and then second, it shows me neither div1 nor div2.</p>
  
  <p>Someone please help me, I thank you in advance</p>