CODEWITHSUNDEEP
javascriptjqueryjquery-select2
Phaelax
Phaelax

Reputation: 2009

unable to clear select2

I have a select2 element that allows multiple selections. One of the options is "none" with a value of 0, which when selected should clear out any previously selected options. The problem I'm having is while it's updating the data on the backend, the options displayed to the user remains. For instance, I select apples but then select none. Apples stays displayed, however it's been removed from the values array and apples shows back up as an available option in the dropdown again. Though the integrity of the data is fine, to the user it could appear to have apples select two or more times. (hope that makes sense)

If I trigger a change event on props_select from outside this function, it works as expected and the user's view is updated. It's as if Select2 won't allow an update of the view while still executing the change function.

I'm using Select2 3.5, which I know is outdated but it's outside of my control. To update to a newer version would require security approval followed by months of regression testing (it sucks).

$('#props_select').change(function(e){

    if( typeof e.added != 'undefined' && e.added.id == '0'){
        $('#props_select').val([0]).trigger('change');

    }
});



<div class="select-filter">
    <label for="props_select">Equipment contains:</label>
    <select id="props_select" name="props_select" class="form-control 
        form-control-lg" multiple="multiple">
        <cfloop query="myquery">
            // build options here
        </cfloop>

        <option value="0">None</option>
    </select>
</div>

Upvotes: 1

Views: 449

Answers (1)

dw_
dw_

Reputation: 1827

I think you are using the new Select2 documentation. Should be:

$(this).select2("val", []);

Demo: https://jsfiddle.net/zbwh7qdr/1/

Upvotes: 2

Related Questions