Bootstrap selectpicker - use two different data-selected-text-format values in one selectpicker

Question

Is it possible to use selected-text-format “static” alongside with selected-text-format “count“ in multiselect selectpicker?

This is my current selectpicker:

<select id=“postcodeSelect" class="selectpicker" title="Postcode" data-size="5" data-live-search="true" multiple data-selected-text-format="static">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Now its always showing “Postcode” no matter what is picked, but I would like it to show “Postcode (3 items selected)” in case 3 postcodes are picked.

Answer 1

This is how you can :

    <select id="postcodeSelect" class="selectpicker" title="Postcode" data-size="5" data-live-search="true" multiple data-selected-text-format="count" data-count-selected-text="Postcode ({0} items selected)">
<option>1</option>
<option>2</option>
<option>3</option>

JsFiddle : http://jsfiddle.net/awb14kzg/

Answer 2

You cannot use multiple data-selected-text-format, your only options are:

• values: A comma delimited list of selected values (default)
• count: If one item is selected, then the option value is shown. If more than one is selected then the number of selected items is displayed, e.g. 2 of 6 selected
• count > x: Where x is the number of items selected when the display format changes from values to count
• static: Always show the select title (placeholder), regardless of selection

Source: https://silviomoreto.github.io/bootstrap-select/examples/#selected-text-format

If the concern is clarity I would recommend a <label> to identify the purpose of your <select> box. That, in combination with count > x should be sufficient enough to convey that (in your case) the X items being selected are postal codes.