0
348
ViewsComplemento de menú desplegable de selección múltiple, ¿cómo puedo hacer para mostrar solo la cantidad de elementos seleccionados?
Estoy desarrollando un proyecto escolar usando asp.net y c# y necesito hacer que mi menú desplegable de selección múltiple muestre en el cuadro de texto la cantidad de elementos seleccionados como lo hace cuando selecciono más de 4 elementos, pero necesito hacer eso siempre. Existe alguna forma de hacerlo, y existe alguna forma de hacer que el cuadro de texto tenga siempre el mismo ancho.
Esa es la casilla cuando no selecciono nada
Ese es el cuadro cuando selecciono 1,2 o 3 elementos
Ese es el cuadro cuando selecciono más de 4 opciones
Mi código de selección.
<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>Quiero mostrar como cuando selecciono más de 4 opciones pero siempre, aunque solo selecciono 1,2 o 3 elementos, ¿existe alguna forma de hacerlo? ¿Y existe alguna forma de mostrar como 10 elementos y tener que desplazarse hacia abajo para ver el resto de los elementos?
2 answers
Answer question0
Use esta versión de arranque de selección múltiple para que el cuadro de texto tenga el mismo ancho
"library": "bootstrap-multiselect@0.9.13", "destination": "wwwroot/lib/bootstrap-multiselect/"Y
<script type="text/javascript"> $(function () { $(".listbox").multiselect({ includeSelectAllOption: true, buttonWidth: '100%', numberDisplayed: 5, }); }); </script>numberDisplayed significa cuántas opciones selecciona antes de que muestre "x seleccionado"
0
A continuación se muestra una demostración de trabajo, puede consultarla.
@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>consulte: numberDisplayed ¿Cómo ocultar las casillas de verificación?
resultado:
