0
349
VistasMultiselect dropdown menu plugin, how can i do to only show the number of itens selected?
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 value=@i.ap_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?
2 Respuestas
Responde la pregunta0
Use this version of multiselect bootstrap to make the text box have the same width
"library": "bootstrap-multiselect@0.9.13",
"destination": "wwwroot/lib/bootstrap-multiselect/"
And
<script type="text/javascript">
$(function () {
$(".listbox").multiselect({
includeSelectAllOption: true,
buttonWidth: '100%',
numberDisplayed: 5,
});
});
</script>
numberDisplayed means how much options you select before it shows "x selected"
0
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 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>
refer to :numberDisplayed How to hide the checkboxes?
result:
