javascript - 如何禁用其他选定选择中的选定值并关闭单个选定选择中的选定选项

Question

我使用的是 Chosen select 版本 1.8.7，我有 3 个并排的 Chosen select，它从数据库表中提取选项。

如果我在第一个选择中选择选项 1，则应在第二个和第三个选择中禁用该选项，如果我在第二个选择中选择选项 2，则应在第一个和第三个选择中禁用该值，如果我在第三个选择中选择选项 3，那么它应该在第一个和第二个选择中禁用。

此外，我想从选择的选择中删除选定的选项，例如多选，但我只想使用单选。我在Chosen select的文档中没有找到这个。

这是我的代码:

Check fiddle

<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="1">
  <option value=""></option>
  <option value="United States">United States</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Aland Islands">Aland Islands</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
</select>
<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="2">
  <option value=""></option>
  <option value="United States">United States</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Aland Islands">Aland Islands</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
</select>
<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="3">
  <option value=""></option>
  <option value="United States">United States</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Aland Islands">Aland Islands</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
</select>

//This makes chosen select the first matching result from the list
//if you wrote anything on the input element (and it matches
//anything). 
$('select').chosen();

$container1 = $('#select1').next();
$('input', $container1).change(function() {
  var value = $('.active-result:first', $container1).text();
  if (value !== undefined) {
    $('#select1').data('chosen').result_select(value);
  }
});

//Alternatively you could achieve the same with something like
//this, but it's getting a bit complicated:
var $container2 = $('#select2').next();
$('input', $container2).change(function() {
  var option_index = $('.chosen-container .active-result:first').data("option-array-index");
  if (option_index !== undefined) {
    var option_value = $('#select2 option:nth-child(' + (option_index + 1) + ')').val();
    $('#select2').val(option_value);
    $('#select2').trigger("chosen:updated");
  }
});

body {
  margin: 10px;
}

select {
  width: 200px;
}

tr>td:first-child {
  text-align: right;
  padding-right: 7px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.js"></script>
<table>
  <tr>
    <td>
      <label for="select1">Using Chosen#result_select method</label>
    </td>
    <td>
      <select id="select1" class="first" multiple>
        <option value="1">abc</option>
        <option value="2">def</option>
        <option value="3">ghi</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <label for="select2">Using other means...</label>
    </td>
    <td>
      <select id="select2" class="second" multiple>
        <option value="1">abc</option>
        <option value="2">def</option>
        <option value="3">ghi</option>
      </select>
    </td>
  </tr>
</table>

Answer 1

<form>
<div id="container">
  <div id="content">
    <div class="side-by-side clearfix">
    <select data-placeholder="Choose a Country..." id="1" class="chosen-select" tabindex="1">
                <option value=""></option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
     </select>
     <select data-placeholder="Choose a Country..." id="2" class="chosen-select" tabindex="2">
                <option value=""></option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
     </select>
     <select data-placeholder="Choose a Country..." id="3" class="chosen-select" tabindex="3">
                <option value=""></option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
    </select>
    <select data-placeholder="Choose a Country..." id="4" class="chosen-select" tabindex="4">
                <option value=""></option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
    </select>
    <select data-placeholder="Choose a Country..." id="5" class="chosen-select" tabindex="5">
                <option value=""></option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
    </select>
    <select data-placeholder="Choose a Country..." id="6" class="chosen-select" tabindex="6">
                <option value=""></option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
    </select>
    </div>
  </div>
</div>
<script src="https://harvesthq.github.io/chosen/docsupport/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<script src="https://harvesthq.github.io/chosen/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="https://harvesthq.github.io/chosen/docsupport/init.js" type="text/javascript" charset="utf-8"></script>
</form>
<script>
var selected=[];
$.each($('.chosen-select'), function(){
    selected[$(this).attr('id')] = '';
});

$('.chosen-select').change(function() {
    var value = $(this).val();
    if(selected[$(this).attr('id')] !== ''){
        var oldValue = selected[$(this).attr('id')];
        $(this).siblings('.chosen-select').addBack().children('option').each(function() {
            if($(this).val() === oldValue)
                $(this).removeAttr('disabled').trigger('chosen:updated');
        });        
    }
    selected[$(this).attr('id')] = value;
    $(this).siblings('.chosen-select').addBack().children('option').each(function() {
        if($(this).val() === value)
            $(this).attr('disabled', true).trigger('chosen:updated');
    });
});
</script>