Bootstrap-select is not working with Bootstrap 5

The bootstrap-select is not working properly, data is inserted but remove is not working properly, I am using bootstrap 5 and Laravel 12.

I'm using Bootstrap Select with jQuery to update a <select> element dynamically based on another select's change.

Here is my code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>
<select id="attribute_id" multiple class="form-control" data-live-search="true">
    <option value="1">Color</option>
    <option value="2">Size</option>
    <option value="3">Pattern</option>
    <option value="4">Material</option>
</select>

<select id="is_filter" multiple class="selectpicker" data-live-search="true"></select>
<select id="is_variation" class="selectpicker"></select>

Problem:

When I select one option, everything works. But when I select another one (while one is already selected), instead of refreshing with only the selected ones, it duplicates the previously selected options, like this:

I choose "Pattern" → is_filter gets 1 option.

Then I choose "Color" → is_filter ends up with 4 options: 2 of "Pattern" and 2 of "Color".

I've tried using .empty() and .find('option').remove(), but neither clears the old options. What am I doing wrong?

<script>
    $('#attribute_id').selectpicker();
    $('#attribute_id').on('changed.bs.select', function() {
        let attributesSelected = $(this).val();
        let attributes = @json($attributes);
        let attributeForFilter = [];
        attributes.map((attribute) => {
            $.each(attributesSelected , function(i,element){
                if( attribute.id == element ){
                    attributeForFilter.push(attribute);
                }
            });
        });
        $("#is_filter").find("option").remove();
        $("#is_variation").find("option").remove();
        attributeForFilter.forEach((element)=>{
            let attributeFilterOption = $("<option/>" , {
                value : element.id,
                text : element.name
            });
            let variationOption = $("<option/>" , {
                value : element.id,
                text : element.name
            });
            $("#is_filter").append(attributeFilterOption);
            $("#is_filter").selectpicker('refresh');
            $("#is_variation").append(variationOption);
        });
    });
    $("#is_filter").selectpicker();
</script>

Braunson

11 months ago

Level 18

I believe the issue here is because you are calling selectpicker('refresh') inside the loop which causes Bootstrap Select to rebuild the dropdown multiples of time creating duplicates. You should instead refresh only once after adding all options.

Here's my suggested approach:

$('#attribute_id').selectpicker();
$('#attribute_id').on('changed.bs.select', function() {
    let attributesSelected = $(this).val();
    let attributes = @json($attributes);
    let attributeForFilter = [];
    
    // Build the filtered array
    attributes.map((attribute) => {
        $.each(attributesSelected, function(i, element) {
            if(attribute.id == element) {
                attributeForFilter.push(attribute);
            }
        });
    });
    
    // Clear existing options
    $("#is_filter").empty();
    $("#is_variation").empty();
    
    // Add all new options at once
    attributeForFilter.forEach((element) => {
        let attributeFilterOption = $("<option/>", {
            value: element.id,
            text: element.name
        });
        let variationOption = $("<option/>", {
            value: element.id,
            text: element.name
        });
        
        $("#is_filter").append(attributeFilterOption);
        $("#is_variation").append(variationOption);
    });
    
    // Refresh both selectpickers ONCE after all options are added
    $("#is_filter").selectpicker('refresh');
    $("#is_variation").selectpicker('refresh');
});

// Initialize selectpickers
$("#is_filter").selectpicker();
$("#is_variation").selectpicker();

I moved the selectpicker('refresh') outside the loop, employed .empty() instead of .find('option').remove(), added refresh for both selects and initialized both target selects as selectpickers.

Give that a go and let me know.

Please or to participate in this conversation.