jQuery選擇：選擇1選項並取消選擇另一個選擇菜單中的相同選項

Question

我有兩個相同的選擇使用最後一個版本jQuery Chosen plugin。我想實現的是如果您在第一次選擇時選擇選項，請在第二次選擇時禁用此選項，反之亦然。我試圖用jQuery prop方法解決它，但它不起作用。

這裏是代碼：

http://jsfiddle.net/aksvuy9q/

<select data-placeholder= "Keyword" multiple style="width:300px;" name="keywordContainSelect" multiple class="selectKeyword"> 
         <option value=""> </option> 
         <option value="1">apartments</option> 
         <option value="2">edward</option> 
         <option value="3">shutters</option> 
         <option value="4">sprtsmen</option> 
         <option value="5">dinner</option> 
         <option value="6">bachelor</option> 
         <option value="7">remember</option> 
         <option value="8">pleasant</option> 
         <option value="9">connection</option> 
         <option value="10">instrument</option> 
         <option value="11">preference</option> 
         <option value="12">valley</option> 
         <option value="13">dashwoods</option> 
         <option value="14">marriage</option> 
         <option value="15">literature</option> 
         <option value="16">imprudence</option> 
         <option value="17">cottage</option> 
         <option value="18">ferrars</option> 
         <option value="19">gentleman</option> 
         <option value="20">sweetness</option> 
         <option value="21">barton</option> 
         <option value="22">provision</option> 
         <option value="23">account</option> 
         <option value="24">daughter</option> 
         <option value="25">goodness</option> 
         <option value="26">songs</option> 
         <option value="27">view</option> 
         <option value="28">assure</option> 
         <option value="29">extremity</option> 
        </select> 

        <script> 

        $("select[name=keywordContainSelect]").chosen(); 

        </script> 

        <select data-placeholder= "Keyword" multiple style="width:300px;" name="keywordNotContainSelect" multiple class="selectKeyword"> 
         <option value=""> </option> 
         <option value="1">apartments</option> 
         <option value="2">edward</option> 
         <option value="3">shutters</option> 
         <option value="4">sprtsmen</option> 
         <option value="5">dinner</option> 
         <option value="6">bachelor</option> 
         <option value="7">remember</option> 
         <option value="8">pleasant</option> 
         <option value="9">connection</option> 
         <option value="10">instrument</option> 
         <option value="11">preference</option> 
         <option value="12">valley</option> 
         <option value="13">dashwoods</option> 
         <option value="14">marriage</option> 
         <option value="15">literature</option> 
         <option value="16">imprudence</option> 
         <option value="17">cottage</option> 
         <option value="18">ferrars</option> 
         <option value="19">gentleman</option> 
         <option value="20">sweetness</option> 
         <option value="21">barton</option> 
         <option value="22">provision</option> 
         <option value="23">account</option> 
         <option value="24">daughter</option> 
         <option value="25">goodness</option> 
         <option value="26">songs</option> 
         <option value="27">view</option> 
         <option value="28">assure</option> 
         <option value="29">extremity</option> 
        </select> 

        <script> 

        $("select[name=keywordNotContainSelect]").chosen(); 

        $("select[name=keywordContainSelect]").on('change', function(evt, params) { 
         var valSel = params.selected; 
         var valDeSel = params.deselected; 

         if (valSel > 0){ 
          $('select[name=keywordNotContainSelect] option[value='+valSel+']').prop("disabled", true); 
         } 
         if (valDeSel > 0) 
          $('select[name=keywordNotContainSelect] option[value='+valSel+']').prop("disabled", false); 

        }); 

        $("select[name=keywordNotContainSelect]").on('change', function(evt, params) { 
         var valSel = params.selected; 
         var valDeSel = params.deselected; 

         if (valSel > 0) 
          $('select[name=keywordContainSelect] option[value='+valSel+']').prop("disabled", true); 
         if (valDeSel > 0) 
          $('select[name=keywordContainSelect] option[value='+valSel+']').prop("disabled", false); 

        }); 

        </script> 

同樣的問題和解決方案是here，但解決方案不使用jQuery插件選上的新版本。

Answer 1

給你​​

$(".selectKeyword").chosen().change(function() { 
    var selectedValue = $(this).find('option:selected').val();   
    $(".selectKeyword").find('option[value="'+ selectedValue +'"]:not(:selected)').attr('disabled','disabled'); 
    $(".selectKeyword").trigger("chosen:updated"); 
});