how to display selected value as coma separator in button in bootstrap multi select drop down?

Question

I am using jquery multi-select drop down in my project. I have a drop down with maximum 4 value and if I select a value from the drop-down it is displaying as '3 selected', '4 selected' as bellow image, but I want to display all selected value as coma separate instead of '4 selected'. I am using /bootstrap-multiselect.js

I am generating dropdown dynamically as bellow html code,

                @if (ds.Tables.Count > 0)
            {
                int i = 1;
                foreach (DataRow categogyItem in ds.Tables[0].Rows)
                {


   <div class="ibvm subhselectfildwrap">

                                <select class="listbox selectpicker" id=@string.Format("ddlEmail{0}", i) multiple="multiple" name="@string.Format("Email{0}", i)" style="width: 500px !important;">

                                    @if (ds.Tables.Count > 2)
                                    {
                                        foreach (DataRow EmailItem in ds.Tables[2].Rows)
                                        {

                                            if (NC.ToInt(EmailItem["IN00_01_InBoxId"]) == NC.ToInt(categogyItem["InBoxId"]))
                                            {
                                                <option value="@EmailItem["IN00_01_DetailID"]">@EmailItem["IN00_01_EmailId"]</option>

                                            }

                                        }
                                    }

                                </select>

                            </div>

                                    i++;
                }
            }

in the js file, I have created code as bellow, when I check this code while putting Debugger in js it's working properly and button text has been changed with selected coma separator value but after then js has been called and value has been changed as '4 selected'.

I have referred sample question also. but I can not able to find the solution.

        $('.selectpicker').multiselect({
        enableFiltering: false,
        includeSelectAllOption: true,
        selectAllJustVisible: false,
        enableCaseInsensitiveFiltering: true,
        buttonWidth: '100%'
    });

    $("select").change(function () {
        var str = "";
        $("select option:selected").each(function () {
            str += $(this).text() + ", ";
        });

        $(this).parent('.subhselectfildwrap').find('div.btn-group').find('span.multiselect-selected-text').text(str);

    })
  .trigger("change");

Edit:

I am using 'http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js'

Which multi-select jquery plugin your using, can you add link of that? — Amit Kumar, Sep 28 '17 at 05:07
bootstrap-multiselect.js default no of option displaying is 3, after the 3 values selected it shows 4 selected and so on http://davidstutz.github.io/bootstrap-multiselect/#configuration-options-numberDisplayed. — Saravanan N, Sep 28 '17 at 05:20
@AmitKumar i have edit quetion and added the link of the js i am using. — alka vaghela, Sep 28 '17 at 05:25

Amit Kumar · Accepted Answer · 2017-09-28T08:46:23.600

As It is default behavior to bootstrap multi select dropdown, So if you need to show all label instead of count, then you need to modify buttontext.

Here I have updated the button text on every change event. HTML :

<div class="form-group">
    <div class="col-md-4">
        <select id="test" class="multiselect-ui form-control" multiple="multiple">
            <option value="cheese">Cheese</option>
            <option value="tomatoes">Tomatoes</option>
            <option value="mozarella">Mozzarella</option>
            <option value="mushrooms">Mushrooms</option>
            <option value="pepperoni">Pepperoni</option>
            <option value="onions">Onions</option>
            <option value="mozarella1">Mozzarella</option>
            <option value="mushrooms1">Mushrooms</option>
            <option value="2pepperoni">Pepperoni</option>
            <option value="3onions">Onions</option>
        </select>
    </div>
</div>

JS :

$('#test').multiselect({
    includeSelectAllOption: true,
    maxHeight: 150,
    buttonWidth: 'auto',
    numberDisplayed: 2,
    nSelectedText: 'selected',
    nonSelectedText: 'None selected',
    buttonText: function(options, select) {
        var numberOfOptions = $(this).children('option').length;
        if (options.length === 0) {
            return this.nonSelectedText + '';
        } else {
            var selected = '';
            options.each(function() {
                var label = ($(this).attr('label') !== undefined) ?
                    $(this).attr('label') : $(this).html();
                selected += label + ', ';
            });
            return selected.substr(0, selected.length - 2) + '';

        }
    }
});

CSS:

 .btn-block {width : auto !important;}

Here You also need to set buttontext width property auto

JSFiddle Method 1

Another way to achieve this.

Get total option count.
Get all option text.
Then use plugin configuration property.

Js Code

var total = $('#test option').length;
var options = $('#test option');

var allText = $.map(options ,function(option) {
    return option.value;
}).join(',');

$('#test').multiselect({numberDisplayed: total,allSelectedText : allText});

JsFiddle Method 2

how to display selected value as coma separator in button in bootstrap multi select drop down?

1 Answers1