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

Question

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

如果我在第一个选择的选择中选择了选项1，则应在第二个和第三个选择的选择中禁用该选项，如果我在第二个选择的选择中选择了选项2，则应在第一个和第三个选择的选择中禁用该值，如果我在选择的第三个选择中选择了选项3，则应该在选择的第一个和第二个选择中将其禁用。

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

这是我的代码：

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>

Answer 2

由于您说您发现了删除已选择值的选项，所以我只研究了如何“删除” ，或者在这种情况下，“禁用” ，从一个选择中选择的值将在另一个选择中选择。

请注意，此示例使用了jQuery，因此必须包含一个jQuery库才能使它起作用。

您可以做的是使用一个事件侦听器，该事件侦听器会在下拉菜单元素上触发 onchange 。然后，您可以检查已选择的内容，先前的选择以及是否进行了其他选择。

然后，通过查看先前选择的内容，在其他选择中的值上设置属性 disabled 。如果它们匹配，则它们将被禁用。但是，如果没有，则再次删除 disabled 属性，以便可以在选择之间保持交替。

示例：

$(document).ready(function () {
    $(".chosen-select").change(function () {
        var value = $(this);
        var prevVal = value.data("prev");
        var otherSelects = $(".chosen-select").not(this);
        otherSelects.find('option[value="' + $(this).val() + '"]').attr('disabled', true);
        if (prevVal) {
            otherSelects.find('option[value="' + prevVal + '"]').attr('disabled', false);
        }
        value.data("prev", value.val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>