多选下拉菜单插件，我该怎么做才能只显示所选项目的数量？

Question

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

那是我什么都没有的盒子select

这就是我 select 1,2 或 3 个元素时的框

这就是我 select 超过 4 个选项时的方框

我的 select 代码。

<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>

我想在我 select 超过 4 个选项时显示，但总的来说，即使我只是 select 1,2 或 3 个元素，是否有任何方法可以做到这一点？是否存在仅显示 10 个元素并且必须向下滚动才能看到其余元素的任何方式？

Answer 1

使用这个版本的 multiselect bootstrap 使文本框具有相同的宽度

"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 表示您 select 在显示“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 How to hide the checkboxes?

结果：

多选下拉菜单插件，我该怎么做才能只显示所选项目的数量？

Multiselect dropdown menu plugin, how can i do to only show the number of itens selected?

javascript

c#

asp.net

bootstrap-multiselect

asp.net-core