Question

我在项目中使用jquery multi-select下拉列表。我有一个下拉列表，最多有4个值，如果我从下拉列表中选择一个值，它会显示为＆＃39; 3选择＆＃39;，＆＃39; 4选择＆＃39;如下图所示，但我希望将所有选定值显示为昏迷分开而不是选择＆＃39; 4。我正在使用/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中它正常工作并且按钮文本已经更改为选定的昏迷分隔符值但是之后已调用js并且已更改值，因为选择了＆＃39; 4。

我也提到了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");

修改：

我正在使用＆＃39; http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js＆＃39;

Answer 1

因为它是引导多选下拉列表的默认行为，所以如果你需要显示所有标签而不是count，那么你需要修改buttontext。

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

JSFiddle Method 1

实现这一目标的另一种方法。

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

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

如何在引导程序多选下拉菜单中的按钮中显示所选值作为彗差分隔符？

1 个答案: