在 Multi select 下拉列表 jquery 中显示所有类别

Question

这是我的多 select 下拉菜单代码

<select class="form-control" id="lstFruits" required multiple="multiple" name="catId[]">
    @foreach($catlists as $category)
    <option value="{!! $category->id !!}"    >{!! $category->name !!}</option>
    @endforeach
</select>
<script type="text/javascript">
    $(function () {
        $('#lstFruits').multiselect({
            includeSelectAllOption: true
        });
        $('#btnSelected').click(function () {
            var selected = $("#lstFruits option:selected");
            var message = "";
            selected.each(function () {
                message += $(this).text() + " " + $(this).val() + "\n";
            });
            alert(message);
        });
    });
</script>

问题：

当我 select 超过 4 个类别时，它显示 4 个 selected，但我想在下拉列表中显示这 4 个类别。

它显示这个：

我想要这样的东西，应该显示所有类别。

Answer 1

基于 documentation，您必须覆盖 buttonText 属性:

$('#lstFruits').multiselect({
    ...
    buttonText: function(options, select) {
        var labels = [];
        options.each(function() {
            if ($(this).attr('label') !== undefined) {
                labels.push($(this).attr('label'));
            }else {
                labels.push($(this).html());
            }
        });
        return labels.join(', ') + '';
    }
});