当已经选择了选择选项时发生事件触发器Select2（多个选择选项）

Question

I have a few select option like this :

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

and I want the option is disabled when the option is already selected in another select option.

my jquery look like this :

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

everything is works fine, until i tried to use select2 plugin, so when i used $('select.competence').select2() , the disabled function is not work, i think the selector is wrong.

Answer 1

As far as I know, you would have to selector.select2('destroy') and then reinitialize the select2 see if this is what you were asking for, I assume that you have multiple selects with same value options.

 $(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>