title: jQuery Chosen: how to select 1 option value and remove the same one in another select-menu?
body: <p>I've put 2  elements next to eachother. Both of them are using the jQuery Chosen plugin.</p>
  <p>This is the code:</p>
  <pre><code>&lt;div class=&quot;wrapper&quot;&gt;
    &lt;select data-placeholder=&quot;Number row 1&quot; style=&quot;width:350px;&quot; multiple class=&quot;chzn-select&quot;&gt;
      &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
      &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
      &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
      &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
      &lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;
      &lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
      &lt;option value=&quot;6&quot;&gt;6&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;select data-placeholder=&quot;Number row 2&quot; style=&quot;width:350px;&quot; multiple class=&quot;chzn-select&quot;&gt;
      &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
      &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
      &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
      &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
      &lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;
      &lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
      &lt;option value=&quot;6&quot;&gt;6&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This is the Javascript. jQuery library, the latest Chosen plugin and CSS are all properly included ofcourse.</p>
  <pre><code>&lt;script&gt;
  $('.chzn-select').trigger(&quot;liszt:updated&quot;);
  $('.chzn-select').chosen().change( function() {
    var selectedValue = $(this).find('option:selected').val();
    $(this).parent().find('option[value=&quot;'+ selectedValue +'&quot;]:not(:selected)').attr('disabled','disabled');
  });
  &lt;/script&gt;
  </code></pre>
  <p>This is what I want to accomplish with the script above.</p>
  <ul>
  <li>There are two select elements with the same values. When value &quot;1&quot; has been selected in element 1 for example, I want to disable it in element 2.</li>
  <li>However. after I deselect value &quot;1&quot; in element 1, it's <strong>still</strong> disabled in element 2. That's not what I want. The other value should be available again after deselecting the value in the 1st element.</li>
  </ul>
  <p>Does anybody know how to accomplish this?</p>
  <p>I've put up a JSFiddle here: <a href="http://jsfiddle.net/dq97z/3/" rel="nofollow noreferrer">http://jsfiddle.net/dq97z/3/</a></p>