Button to Deselect the selected value ?

[amitsquare]

As per documentation , "data-action-box" adds the two button to select all / deselect all button in the header .But this only happens in case of "multiple selection " .

Is there any way to add similar deselect button for single selection dropdown ?

[caseyjhol]

No - I recommend using a multiple select with data-max-options="1".

[amitsquare]

But this is not correct solution , As selectAll button will select all the options .

[tontonsb]

I also need a dropdown where you can select an option or select none of them. Currently this requires using multiple, otherwise the user can't deselect. Or we have to introduce the action bar which allows the users to deselectAll and selectAll.

But how do we get value out of this? Currently I have to do this, to get the single value out of multiple-select element:

elementVal = element.val() ? element.val()[0] : null;

Of course, this is all doable, but it shouldn't require so many workarounds to do these things.

It also would be useful if we could include only the deselectAll button without the selectAll :)

[gopuneet]

+1 for Deselect/Clear button for single selection dropdown.
Using a multiple select adds a redundant Select All button and the Deselect All button doesn't look correct as we're allowing selection/deselection of only one option.

[ernestopinchaaqui]

+1 for Desect/Clear

[mattfeury]

+1

[szmalec]

+1

[zsoltiNagy]

+1

[keymastervn]

+1

[sohebcakewalk]

+1 for Desect/Clear

[jadamec]

+1

[florianbinderme]

+1

[mulite]

+1

[fr0z3nfyr]

+1

[maurizioPollen]

+1

[tombauto]

3 years after and this isn't a feature up until now?
I wonder why, as I am new on using this tool and I really like what you have done here.
But this feature is actually expected as we are improving the way traditional selection works, rather than a user adding an option "none" as another selection, as Clear/Deselect is the perfect way to do it.

I tried to insert an element during ready but not all time the element gets inserted, maybe because the generator for selectpicker() was not done yet; However there is no .done() function to extend to selectpicker, so my workwaround was to put this insert to a setTimeout but it feels more a hack rather than proper integration. I also don't get the same result every time, not all the time the element gets inserted even it is a delayed time.

Here is my code for adding element:

$(function(){
$(".selectpicker").find("ul").append('

Clear Selection

');
});

Although the above code, may work on adding the element, I couldn't make the clear function work.
I was only able to clear the current selected option, but when selecting another value, its no longer reflecting as selected.

[EDIT] : I was able to do a work-around but still require setTimeout but for this approach I followed the suggested using of "multiple" with data-max-options="1"
Here is the code:

        setTimeout(function () {
            enableClearOptionInSelect("opt-mySelection");
        }, 1000);

    let enableClearOptionInSelect = function (id) {
        $("#"+ id +" .bs-select-all").hide(); // Hide Select-All
        let btnClear = $("#"+ id +" .bs-deselect-all");
        btnClear.html("Clear Selection");
        btnClear.addClass("w-100");
        console.log("enableClearOptionInSelect completed.");
    }

Output:

[hartadi]

+1 pls

[caseyjhol]

This change will be a part of the v1.14.0 release. This issue will be updated after it's made available.

How to enable

allowClear: true or data-allow-clear="true"

Demos:

• Bootstrap 4: https://plnkr.co/edit/c2XDSXipVnbMkjaM
• Bootstrap 3: https://plnkr.co/edit/2OcOGhfmBxRpbDh2

[ctf0]

until the new option is released, u can use the below to target the select with single option only

.bootstrap-select {
    select[data-max-options='1'] ~ .dropdown-menu .bs-actionsbox {
        display: none;
    }
}

now u have the same behavior as multi selection, keep in mind that this will not auto focus the selected option when the menu opens 👎 .

PS
there is also https://codepen.io/Prateik2710/pen/vpgKdL

PPS
you can also add an empty option to the start of your list.

[caseyjhol]

Released in v1.14.0-beta!

[scammi]

Until allowClear function well is tested.

https://codepen.io/scammi/pen/XWpErrL

[MaaxGr]

3 years and 1.14 is still not released. :o

I used input-groups for now to solve this problem:

<div class="form-group">
    <label for="unternehmen_Ansprechpartner_Intern">Ansprechpartner intern:</label>
    <div class="input-group">
        <select id="unternehmen_Ansprechpartner_Intern"
                name="unternehmen_Ansprechpartner_Intern"
                class="form-control selectpicker"
                data-live-search="true" data-non-selected-text="body" data-allow-clear="true">
            <option value=""></option>
            <option value="1">Großmann, Max</option>
        </select>
        <span class="input-group-addon" id="basic-addon2"
              style="cursor: pointer"
              onclick="$('select[name=unternehmen_Ansprechpartner_Intern]').selectpicker('val', '')">
            <i class="fas fa-times"></i>
        </span>
    </div>
</div>