jquery select2 multiselect: How can I check if options is selected or not?

Question

I need to catch these 2 events:

• first option is selected
• all options are deselected

Reason is - that I want to disable another dropdown (which is responsible for the content of my multiselect) when the first option is selected or all previous selected are deselected.

Update:

$('.projectSelector').on('change', function() {
        var targetProject_id = $('#project-id :selected').val();
        updateParticpantDropdown(targetProject_id);
    });

    function updateParticpantDropdown(selectedProjectId){

        $.ajax({
            type: "POST",
            url: '/xx/projects/xx/'+ selectedProjectId,
            dataType : "json",
            success: function (response, status) {
                if(status === "success") {

                    //console.log('success post');

                    if(response.result == "error") {

                        alert(response.message);

                    }else if (response.result == "success"){

                        var data = response.data;

                        $(".participantSelector").empty().select2({
                            placeholder: "Click here to select participants for above selected project",
                            allowClear: false,
                            data: data
                        });

                    }
                } else if(status === "error") {
                    // Ajax Post call failed
                    console.log('fatal ajax post call failed');
                }
            }
        });
}

This is my ajax part. When I select from the dropdown '.projectSelector' I update my multiselect '.participantSelector'.

Works fine so far!

What I want no is to catch the first selection in '.participantSelector' to disable '.projectSelector'. And the other way round, if nothing is selected in '.participantSelector' set '.projectSelector' active.

My html looks like this:

<select name="participant_id[]" multiple="multiple" class="form-control select2me participantSelector" required="required" id="participant-id"><option value=""></option></select>

From the docs I tried this:

$('select').on('select2:select', function (evt) {
  // Do something
});

But this does fire on selection in a dropdown - but not with a selection form my multiselect.

Btw, I get on selection in my multiselect this error displayed:

TypeError: b.dataAdapter is null

Answer 1

You can get the first item in a list with first() method. See documentation, and you can get selected options with :selected selector. See documentation.

Try something like:

$('#select').on('change', function() {
    var first = $(this).find('option').first().val();
    var none = $(this).find('option:selected').length;

    if ($(this).val() == first) {
        alert('First item selected!');
    } else if (none == 0) {
        alert('All items deselected!');
    }
});