javascript - How to control select2 selection on change event? - Stack Overflow

admin管理员组

文章数量:1391792

I have a multiple select element with select2 v 3.5.2 plugin.

I need to be sure that the specific option value -1 will be not selected with other values.

I tried this solution:

$('#mysel').on("change",function(e){
    if($("#mysel option[value=-1]").is(":selected") && $("#mysel option[value!=-1]:selected").length>0){
        $("#mysel").val(-1).trigger('change.select2');
    }
});

But it doesn't work, it change the value in html but select2 container is not updated. I also tried to switch the trigger to .trigger('change') but it didn't work.

I tried to run a change with a setTimeout() and it works... so I guess there is an issue on the event triggering the same event. Is there a solution other than not-so-elegant setTimeout update?

I have a multiple select element with select2 v 3.5.2 plugin.

I need to be sure that the specific option value -1 will be not selected with other values.

I tried this solution:

$('#mysel').on("change",function(e){
    if($("#mysel option[value=-1]").is(":selected") && $("#mysel option[value!=-1]:selected").length>0){
        $("#mysel").val(-1).trigger('change.select2');
    }
});

But it doesn't work, it change the value in html but select2 container is not updated. I also tried to switch the trigger to .trigger('change') but it didn't work.

I tried to run a change with a setTimeout() and it works... so I guess there is an issue on the event triggering the same event. Is there a solution other than not-so-elegant setTimeout update?

• javascript
• jquery
• jquery-select2

Share Improve this question Follow edited Mar 12 at 13:26 Douwe de Haan 6,70633 gold badges3333 silver badges5252 bronze badges asked Mar 12 at 8:40 TobiaTobia 9,5792929 gold badges120120 silver badges242242 bronze badges 2

• Try return false after your .trigger line. This will then "cancel"/"abort" the first event so that the second event can be applied. – fdomn-m Commented Mar 12 at 9:11
• 1 FYI .trigger("change") tells select2 that it has been changed and to update the underlying select. It's not to force a change on the select2 drop down - that should be what .val(..) is doing - but looks like as it's in the middle of an event, the actual change is after that event. Hence cancelling the outer/first event means it won't get re-updated. – fdomn-m Commented Mar 12 at 9:31

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Instead of change event use select2-close event. You don't have to use the setTimeout here. Try the below snippet.

$("#mysel").select2();

$("#mysel").on("select2-close", function (e) {
    if($("#mysel option[value=-1]").is(":selected") && $("#mysel option[value!=-1]:selected").length>0){
        let values = $("#mysel").val().filter(value => value != -1);
        $("#mysel").val(values).trigger('change');
    }
});

<link href="https://cdnjs.cloudflare/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare/ajax/libs/select2/3.5.2/select2.min.js"></script>

<select multiple id="mysel" style="width:300px">
    <option value="-1">None</option>
    <option value="AL">Alabama</option>
    <option value="Az">Arizona</option>
    <option value="Ca">California</option>
    <option value="Co">Colorado</option>
    <option value="Fl">Florida</option>
</select>

Note that in the recent versions of the library, the event name select2-close has been renamed to select2:close.

本文标签： javascriptHow to control select2 selection on change eventStack Overflow