多选下拉菜单插件，我怎样才能只显示选择的项目数？

Question

我正在使用 asp.net 和 c# 开发一个学校项目，我需要让我的多选下拉菜单在文本框中显示选择的项目数，就像我选择超过 4 个元素时所做的那样，但我需要始终这样做。 存在这样做的任何方式，并且存在使文本框始终具有相同宽度的任何方式。

那是我什么都不选择时的框

那是我选择 1,2 或 3 个元素时的框

那是我选择超过 4 个选项时的框

我的选择代码。

<select class="listbox" asp-for="ap"  multiple" >
    @foreach(var i in Model.Aps)
    {
        <option value=@i.ap_id> @i.ap_name </option>
    }
</select>

<script type="text/javascript">
        $(function () {
            $(".listbox").multiselect({
                includeSelectAllOption: true
                                
            });
        });
</script>

当我选择超过 4 个选项时，我想显示，但总是，即使我只选择 1,2 或 3 个元素，是否存在这样做的任何方式？ 并且存在任何仅显示 10 个元素并且必须向下滚动才能查看其余元素的方式吗？

Answer 1

使用此版本的多选引导程序使文本框具有相同的宽度

"library": "bootstrap-multiselect@0.9.13",
"destination": "wwwroot/lib/bootstrap-multiselect/"

和

<script type="text/javascript">
        $(function () {
            $(".listbox").multiselect({
                includeSelectAllOption: true,
                buttonWidth: '100%',
                numberDisplayed: 5,                        
            });
        });
</script>

numberDisplayed 表示您在显示“x selected”之前选择了多少选项

Answer 2

下面是工作demo，大家可以参考。

 @model ViewM
        @{
            Layout = null;
        }
       //using CSS  to adjust the length of the scroll boxshow then show the  elements you want
        <style>
            .multiselect-container{
        
          max-height:282px;
          overflow:auto;
        }
        </style>
        
        
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
          <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        
          <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
        
        
        <select class="listbox" asp-for="ap"  multiple   >
            @foreach(var i in Model.Aps)
            {
                <option value=@i.ap_id> @i.ap_name </option>
            }
        </select> 
        
           
        <script type="text/javascript">  
            $(function () {
                    $(".listbox").multiselect({
                        includeSelectAllOption: true, 
                       numberDisplayed: 0// set numberDisplayed to 0 then you can get  just select 1,2 or 3
                    });
        
                });
    
        </script>

参考： numberDisplayed 如何隐藏复选框？

结果：