多選下拉菜單插件，我怎樣才能只顯示選擇的項目數？

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 如何隱藏復選框？

結果：