如何在 bootstrap 多 select 下拉列表中的按钮中将 selected 值显示为逗号分隔符？

Question

我在我的项目中使用 jquery 多 select 下拉菜单。我有一个最大 4 值的下拉菜单，如果我 select 下拉菜单中的一个值，它显示为“3 selected”、“4 selected”，如下图所示，但我想将所有 selected 值显示为单独的逗号而不是“4 selected”。我正在使用 /bootstrap-multiselect.js

我正在按照下面的 html 代码动态生成下拉列表，

                @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++;
                }
            }

在 js 文件中，我创建了如下代码，当我在将 Debugger 放入 js 时检查此代码时它工作正常并且按钮文本已更改为 selected 逗号分隔符值但之后 js 被调用并且值已更改为“4 selected”。

我也提到了 sample question。但我找不到解决方案。

        $('.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");

编辑：

我正在使用“http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js”

Answer 1

因为 bootstrap multi select 下拉菜单的默认行为，所以如果你需要显示所有标签而不是计数，那么你需要修改按钮文本。

这里我更新了每个更改事件的按钮文本。 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;}

这里还需要设置buttontext的宽度属性auto

JSFiddle Method 1

另一种实现方式。

获取选项总数。
获取所有选项文本。
然后使用插件配置属性.

Js代码

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

如何在 bootstrap 多 select 下拉列表中的按钮中将 selected 值显示为逗号分隔符？

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

jquery

bootstrap-multiselect