title: Jquery sync multiple dropdown list
body: <p>I've multiple dropdown lists and try to use jquery to sync available options in all dropdown list...</p>
  
  <pre><code>&lt;select class="abc" id="test1"&gt;
      &lt;option value="" selected&gt;&lt;/option&gt;
      &lt;option value="1"&gt;RTY&lt;/option&gt;
      &lt;option value="2"&gt;QWE&lt;/option&gt;
      &lt;option value="3"&gt;ASD&lt;/option&gt;
      &lt;option value="4"&gt;ZXC&lt;/option&gt;
      &lt;option value="5"&gt;BNM&lt;/option&gt;
  &lt;/select&gt;
  &lt;select class="abc" id="test2"&gt;
      &lt;option value="" selected&gt;&lt;/option&gt;
      &lt;option value="1"&gt;RTY&lt;/option&gt;
      &lt;option value="2"&gt;QWE&lt;/option&gt;
      &lt;option value="3"&gt;ASD&lt;/option&gt;
      &lt;option value="4"&gt;ZXC&lt;/option&gt;
      &lt;option value="5"&gt;BNM&lt;/option&gt;
  &lt;/select&gt;
  &lt;select class="abc" id="test3"&gt;
      &lt;option value="" selected&gt;&lt;/option&gt;
      &lt;option value="1"&gt;RTY&lt;/option&gt;
      &lt;option value="2"&gt;QWE&lt;/option&gt;
      &lt;option value="3"&gt;ASD&lt;/option&gt;
      &lt;option value="4"&gt;ZXC&lt;/option&gt;
      &lt;option value="5"&gt;BNM&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>If I select one item from one of the dropdown list, the selected option will be hide from others dropdownlist</p>
  
  <pre><code>&lt;select class="abc" id="test1"&gt;
      &lt;option value="1" selected&gt;RTY&lt;/option&gt;
      &lt;option value=""&gt;&lt;/option&gt;
      &lt;option value="2"&gt;QWE&lt;/option&gt;
      &lt;option value="3"&gt;ASD&lt;/option&gt;
      &lt;option value="4"&gt;ZXC&lt;/option&gt;
      &lt;option value="5"&gt;BNM&lt;/option&gt;
  &lt;/select&gt;
  &lt;select class="abc" id="test2"&gt;
      &lt;option value=""&gt;&lt;/option&gt;
      &lt;option value="2"&gt;QWE&lt;/option&gt;
      &lt;option value="3"&gt;ASD&lt;/option&gt;
      &lt;option value="4"&gt;ZXC&lt;/option&gt;
      &lt;option value="5"&gt;BNM&lt;/option&gt;
  &lt;/select&gt;
  &lt;select class="abc" id="test3"&gt;
      &lt;option value=""&gt;&lt;/option&gt;
      &lt;option value="2"&gt;QWE&lt;/option&gt;
      &lt;option value="3"&gt;ASD&lt;/option&gt;
      &lt;option value="4"&gt;ZXC&lt;/option&gt;
      &lt;option value="5"&gt;BNM&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>If I un-select it or select another item, the previous selected item will be show again in all dropdown list
      
          
          RTY
          QWE
          ASD
          ZXC
          BNM
      
      
          
          RTY
          QWE
          ASD
          ZXC
          BNM
      
      
          
          RTY
          QWE
          ASD
          ZXC
          BNM
      </p>
  
  <p>Below is my jquery code, managed to hide selected item from all dropdown lists, but not able to un-hide selected item.</p>
  
  <pre><code>$('.abc').change(function(){
      $('.abc').each(function(){
          if($('.abc').val() != '') {
              $('option[value="'+$(this).val()+'"]').hide();
          } else {
              $('option[value!="'+$(this).val()+'"]').not(this).show();
          }
      });
  });
  </code></pre>
  
  <p>What is wrong in my code?</p>