Bootstrap-select: It is possible to do custom function for data-selected-text-format?

Created on 28 Sep 2019  路  4Comments  路  Source: snapappointments/bootstrap-select

Hi. I need to do something like this with bootstrap-select
image

I have 1 big problem: in provided variants of option
data-selected-text-format
I not found option, that append to default title - selected values. In my case i need same functionality like count > x, but only alongside with title.

Help me please!

Most helpful comment

Hello, you can try something like this:

<select data-placeholder="My placeholder" data-prefix="My custom prefix:">
    ...
</select>
$("select").each(function() {
    $(this).selectpicker({
        noneSelectedText : $(this).data('placeholder')
    });
    $(this).on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        var $title = $(this).parent().find('.filter-option-inner-inner');
        if ($(this).parent().find('.bs-placeholder').length === 0) {
            $title.text($(this).data('prefix') + $title.text());
        } else {
            $title.text($(this).data('placeholder'));
        }
    });
});

All 4 comments

Hello, you can try something like this:

<select data-placeholder="My placeholder" data-prefix="My custom prefix:">
    ...
</select>
$("select").each(function() {
    $(this).selectpicker({
        noneSelectedText : $(this).data('placeholder')
    });
    $(this).on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        var $title = $(this).parent().find('.filter-option-inner-inner');
        if ($(this).parent().find('.bs-placeholder').length === 0) {
            $title.text($(this).data('prefix') + $title.text());
        } else {
            $title.text($(this).data('placeholder'));
        }
    });
});

Hello, you can try something like this:

Thank you, bro
Demo: https://codepen.io/7iomka/pen/xxxZpwN
it remains only to figure out how to customize the internal appearance of the options)

Hi,
I think you should customize via CSS: https://codepen.io/dominik-smaga/pen/GRRoYox

Hi,
I think you should customize via CSS: https://codepen.io/dominik-smaga/pen/GRRoYox

Nice, but need more neat work to match the style guide of bootstrap)
It would be nice to see such a an option in this plugin for this feature)
Thanks for all)

Was this page helpful?
0 / 5 - 0 ratings