Question

我有一些选择这样的选项：

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

我希望在另一个选项中选项为already selected时禁用该选项。

我的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>

事件触发器选择选项时选择2（多选选项）

1 个答案: