javascript - jQuery 选择 : select 1 option and deselect the same option in another select menu

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 Chosen 插件。

Answer 1

给你http://jsfiddle.net/aksvuy9q/2/

$(".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");
});