Deselecting doesn't work after adding the options to <select> on page load

Hi all,

I am experiencing a wrong behavior. On page load I add the options to the <select> element as selected options:

<select id="filter_company" class="selectpicker" multiple title="..." data-live-search="true">
    <option value='company1' selected>Company 1</option>
    <option value='company2' selected>Company 2</option>
    <option value='company3' selected>Company 3</option>
</select>

In JS I initialize the ajaxSelectPicker as required with all necessary options use the trigger:

$('#filter_company').trigger('change');

However, deselecting doesn’t work until I write a keyword in the search. Instead, on deselecting the items change positions but stay selected.

Does anyone else experience that and how could we solve this?

Cheers, Andrius

[jengjeng]

I have fixed this issue by clean the cache object with this code // Use after init select picker $('#select-picker').trigger('change').data('AjaxBootstrapSelect').list.cache = {}

You can try from this fiddle https://jsfiddle.net/kinkongjeng/2o7j08kb/

[andrius-senulis]

I found out that deselecting only works if the options are selected by JS on page load instead of marking them as selected when rendering HTML:

$('#filter_company').val(selected_companies).trigger('change').selectpicker('refresh');

However, it’s still not ideal since the deselected options are not moved out from the “Currently Selected” optgroup, but that I can live with. Also, on deselecting the options are sorted depending on option “preserveSelectedPosition” (before/after) and it can be a little confusing for the user. If the deselected options were moved out from the “Currently Selected” optgroup, it wouldn’t be confusing.

If anyone knows how to make it work correctly, please let me know.