Trying to empty a bootstrap-select and repopulate-CodePudding

I am trying to delete all the values in a multiselect selectpicker from bootstrap-select (https://developer.snapappointments.com/bootstrap-select/) but it doesn't work no matter what I try.

I have tried following the examples from the remove method found in methods in the link provided above.

I have also tried using .empty() followed by .selectpicker('refresh') which only removes the first but when I click the second in the list, it shows the value of the first (removed) as selected.

JSFiddle: https://jsfiddle.net/asjnpLkh/1/

CodePudding user response：

Try resetting the select element with following code.

$('#yourSelectId').val(null).selectpicker('refresh');

This will clear all the selected values and refresh the selectpicker to update its display.

Edit

Remove all options from a select element using the following code:

$('#yourSelectId option').remove();
$('#yourSelectId').selectpicker('refresh');

This will remove all options from the select element and refresh the selectpicker to update its display. Then, you can add new options to the select element as needed. For example:

$('#yourSelectId').append($('<option></option>').val("breed1").html("Breed 1"));
$('#yourSelectId').append($('<option></option>').val("breed2").html("Breed 2"));
$('#yourSelectId').selectpicker('refresh');

CodePudding user response：

Solution: It seems the problem was with beta3 version of bootstrap-select. Using beta2 works fine. Remove all options from bootstrap select multiselect