¿Cómo hacer que la lista desplegable tenga varias casillas de verificación?

Tengo una página aspx y dentro de la página tengo una lista desplegable. Al cargar la página, agrego algunas opciones a la lista desplegable. Pero quiero poder seleccionar más de una opción de esta lista cuando hago clic en la lista desplegable, como una ventana que se abre debajo y tiene una lista de casillas de verificación con las mismas opciones.

¿Cómo puedo agregar varias casillas de verificación a la lista desplegable o hacer una lista de casilla de verificación de esta manera? ¿Debería usar JQuery?

Gracias de antemano.

preguntado el 02 de febrero de 12 a las 11:02

3 Respuestas

Para MultiCheckbox Dropdown en Asp.net, use el siguiente código enter image description here

Primero consulte el ensamblaje de ajaxtoolkit en el archivo

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Luego agregue Script Manager

    <asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release">
    </asp:ScriptManager>

Utilice el siguiente código HTML

<asp:TextBox ID="txtClient" placeholder="Select Clients" runat="server" CssClass="txtbox" ReadOnly="true" Height="28px" Width="250px" Style="margin-bottom: auto; text-align: center; background-color: White; cursor: pointer; border-color: black; margin: 1px;"></asp:TextBox>
<asp:Panel ID="PnlClientlist" runat="server" CssClass="PnlDesign" Style="">
<asp:CheckBox ID="cbAll" runat="server" Text="Select All" BackColor="Aqua" onclick="CheckAll();" />
                                                            <asp:CheckBoxList ID="drpClients" runat="server" onclick="UnCheckAll();">
                                                            </asp:CheckBoxList>
</asp:Panel>
                                                        <cc1:PopupControlExtender ID="PceSelectClient" runat="server" TargetControlID="txtClient"
                                                            PopupControlID="PnlClientlist" Position="Bottom">
                                                        </cc1:PopupControlExtender>

Agregue la referencia anterior en cocde

Utilice Css y JS:

        function CheckAll() {
            var count = 0;
            $('#' + '<%=drpClients.ClientID %>' + '  input:checkbox').each(function () {
                count = count + 1;
            });
            for (i = 0; i < count; i++) {
                if ($('#' + '<%=cbAll.ClientID %>').prop('checked') == true) {
                    if ('#' + '<%=drpClients.ClientID %>' + '_' + i) {
                        if (('#' + '<%=drpClients.ClientID %>' + '_' + i).disabled != true)
                            $('#' + '<%=drpClients.ClientID %>' + '_' + i + ':checkbox').prop('checked', true);
                    }
                }
                else {
                    if ('#' + '<%=drpClients.ClientID %>' + '_' + i) {
                        if (('#' + '<%=drpClients.ClientID %>' + '_' + i).disabled != true)
                            $('#' + '<%=drpClients.ClientID %>' + '_' + i + ':checkbox').prop('checked', false);
                    }
                }
            }
        }



        function UnCheckAll() {
            var flag = 0;
            var count = 0;
            $('#' + '<%=drpClients.ClientID %>' + '  input:checkbox').each(function () {
                count = count + 1;
            });
            for (i = 0; i < count; i++) {
                if ('#' + '<%=drpClients.ClientID %>' + '_' + i) {
                    if ($('#' + '<%=drpClients.ClientID %>' + '_' + i).prop('checked') == true) {
                        flag = flag + 1;
                    }
                }
            }
            if (flag == count)
                $('#' + '<%=cbAll.ClientID %>' + ':checkbox').prop('checked', true);
            else
                $('#' + '<%=cbAll.ClientID %>' + ':checkbox').prop('checked', false);
        }
 .PnlDesign
        {
            border: solid 1px #000000;
            height: 300px;
            width: 330px;
            overflow-y: scroll;
            background-color: white;
            font-size: 15px;
            font-family: Arial;
            width: 450px;
        }
        .txtbox
        {
            background-image: url(img/drpdwn.png);
            background-position: right center;
            background-repeat: no-repeat;
            cursor: pointer;
            cursor: hand;
            background-size: 20px 30px;
        }

respondido 09 nov., 18:08

Probablemente tengas que implementar un control personalizado.

Eche un vistazo: http://www.codeproject.com/Articles/18063/Multi-select-Dropdown-list-in-ASP-NET

Respondido 02 Feb 12, 15:02

En la vista de mi maquinilla de afeitar funciona, cambie a la vista aspx requerida

@Html.DropDownList("selectedclients", new SelectList(Model.ListClients, "ClientId", "FullName", 1), "---Select clients---", new { @class =multiple = "multiple", id = "clients" })

dónde ListClients es un IEnumerable la lista también agrega jquery-1.4.4.min.js y jquery.multiSelect.js en vista y en carga agregar

<script type="text/javascript">
    $(document).ready(function () {
        $("#clients").multiSelect({ oneOrMoreSelected: '*' });
    });
</script>

respondido 08 nov., 18:16

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.