javascript - 当已选择选择选项时触发 Select2 事件(多选选项)

Question

我有几个像这样的选择选项:

<select class="competence">
    <option>Android</option>
    <option>PHP</option>
    <option>RoR</option>
    <option>Javascript</option>
</select>

并且我希望当在另一个选择选项中已选择该选项时禁用该选项。

我的 jquery 看起来像这样:

$('select.competence').on('change', function () {
    $('option').prop('disabled', false);
    $('select.competence').each(function () {
        var val = this.value;
        $('select.competence').not(this).find('option').filter(function () {
            return this.value == val;
        }).prop('disabled', true);
    });
});

一切都工作正常，直到我尝试使用 select2 插件，所以当我使用 $('select.competence').select2() 时， disabled 功能不起作用，我认为选择器是错误的。

Answer 1

据我所知，您必须 selector.select2('destroy') 然后重新初始化 select2 看看这是否是您所要求的，我假设您有多个选择具有相同的值选项。

$(document).ready(function() {
  $('.competence').on('change', function() {
    var allSelects = $('.competence');
    allSelects.find('option').prop('disabled', false);
    allSelects.each(function() {
      var currSelect = $(this);
      allSelects.not(currSelect).find('option').each(function() {

        if ($(this).val() == currSelect.val()) {
          $(this).prop('disabled', true);
        }
      });
    });
    $('.competence').select2("destroy").select2();
  });
  $(".competence").select2();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" />

<select class="competence">
    <option value='android'>Android</option>
    <option value='php'>PHP</option>
    <option value='ror'>RoR</option>
    <option value='javascript'>Javascript</option>
</select>

<select class="competence">
    <option value='android'>Android</option>
    <option value='php'>PHP</option>
    <option value='ror'>RoR</option>
    <option value='javascript'>Javascript</option>
</select>

<select class="competence">
    <option value='android'>Android</option>
    <option value='php'>PHP</option>
    <option value='ror'>RoR</option>
    <option value='javascript'>Javascript</option>
</select>