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

AlexandreLouren231o
May 9, 2022
160 views
0 votes
2 Answers

Im developing a school project using asp.net and c# and i need to make my multiselect dropdown menu to show in the text box the number of itens selected like he does when i select more than 4 elements, but i need to do that always. Exists any way of doing that, and exists any way to make the text box have always the same width.

Thats the box when i dont select nothing

Thats the box when i select 1,2 or 3 elements

Thats the box when i select more than 4 option

My select code.

<select class="listbox" asp-for="ap"  multiple" >
    @foreach(var i in Model.Aps)
    {
        <option [email protected]_id> @i.ap_name </option>
    }
</select>

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

I want to show like when i select more than 4 options but allways,even though i just select 1,2 or 3 elements, exists any way of doing that?
And exists any way of just show like 10 elements and have to scroll down to see the rest of the elements?

Answers

- LYass
- May 10, 2022 at 10:16 am
- 0 votes
0
Use this version of multiselect bootstrap to make the text box have the same width
```
"library": "[email protected]",
"destination": "wwwroot/lib/bootstrap-multiselect/"
```
And
```
<script type="text/javascript">
        $(function () {
            $(".listbox").multiselect({
                includeSelectAllOption: true,
                buttonWidth: '100%',
                numberDisplayed: 5,                        
            });
        });
</script>
```
numberDisplayed means how many options you select before it shows "x selected"
Login or Signup to reply.

Below is work demo, you can refer to it.

 @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 [email protected]_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>

refer to :numberDisplayed
How to hide the checkboxes?

result: