Bootstrap-select: How to update the select picker after changing options?

[alex-piccione]

How to update the select picker after changing options?

[jasonosgood]

Hi Casey.

I’m enjoying learning, using bootstrap and bootstrap-select. Thank you for making this work available. Now even I can make forms that look pretty good. :)

Apologies, I don’t yet know how to contribute changes.

I made a small change so that a collapsed select input would show the abbreviation of the options selected.

Here’s the snippet from bootstrap-select.js render: function(updateLi):

        var selectedItems = this.$element.find('option:selected').map(function() {
            var $this = $(this);
            var icon = $this.data('icon') && that.options.showIcon ? '<i class="' + that.options.iconBase + ' ' + $this.data('icon') + '"></i> ' : '';
            var subtext;
            if (that.options.showSubtext && $this.attr('data-subtext') && !that.multiple) {
                subtext = ' <small class="muted text-muted">'+$this.data('subtext') +'</small>';
            } else {
                subtext = '';
            }
            if ($this.data('content') && that.options.showContent) {
                return $this.data('content');
            } else if ($this.data('abbrev')  && that.options.showContent) { // <— Added this
                return $this.data('abbrev’);    // <— Added this
            } else if ($this.attr('title') !== undefined) {
                return $this.attr('title');
            } else {
                return icon + $this.html() + subtext;
            }
        }).toArray();

Here’s how I use it:

<select name=“requirements" multiple title="Choose all that apply..." class="form-control selectpicker">
    <optgroup label="Areas of Knowledge">
        <option data-abbrev="I&amp;S" value="IS">Individuals &amp; Societies</option>
        <option data-abbrev="NW" value="NW">The Natural World</option>
        <option data-abbrev="VPLA" value="VLPA">Visual, Literary, and Performing Arts</option>
    </optgroup>
    <option data-abbrev="Writing" value="WRITING">Additional Writing</option>
    <option data-abbrev="Div" value="DIV">Diversity</option>
    <option data-abbrev="Comp" value="COMP">English Composition</option>
    <option data-abbrev="QSR" value="QSR">Quantitative, Symbolic, or Formal Reasoning</option>
</select>

If all 7 options were selected, the collapsed input control text would display:

 I&S, NW, VPLA, Writing, Div, Comp, QSR

Instead of the original text of each option.

Again, thank you for your efforts. I hope you find this modest contribution helpful.

Cheers, Jason

[alex-piccione]

Using the "refresh" after changing the options: .selectpicker('refresh') is the solution i found.

[truckingsim]

@alex75ita that is the correct way to do it.

[rejesh]

.selectpicker('refresh') is too slow if the drop down have large options. Is thr any other solution to reset bootstrap select option more faster.

I have 15 + drop downs in a search form and each having 100+ options.