Question

我有一个aspx页面，在页面中我有一个下拉列表。在页面加载中，我向下拉列表添加了一些选项。但是，当我单击下拉列表时，我希望能够从此列表中选择多个选项，例如在其下方打开的窗口，并且具有相同选项的复选框列表。

如何在下拉列表中添加多个复选框，或以这种方式制作复选框？我应该使用JQuery吗？

提前致谢。

Answer 1

对于Asp.net中的MultiCheckbox下拉列表，请使用以下代码enter image description here

首先在文件

中引用ajaxtoolkit assembply

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

然后添加脚本管理器

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

使用以下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>

在cocde中添加上述参考

使用Css和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;
        }

Answer 2

可能你必须实现一个自定义控件。

看看：http://www.codeproject.com/Articles/18063/Multi-select-Dropdown-list-in-ASP-NET

Answer 3

在我的剃刀视图中，它可以运行，请更改为所需的aspx视图

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

其中ListClients是IEnumerable列表还可以在视图中添加jquery-1.4.4.min.js和jquery.multiSelect.js 并在加载中添加

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

Answer 4

我复制了以前使用的一段代码。您可以使用ListBox项代替Dropdownlist

前端

                                 <label>Programs</label> <br />You can choose more than one programs by pushing -Ctrl
                                <asp:ListBox CssClass="form-control" ID="ListBox1" runat="server" SelectionMode="Multiple" Width="400" Height="150" >
                                        <asp:ListItem Value="1" Text="Prog1" />
                                        <asp:ListItem Value="2" Text="Prog2" />
                                        <asp:ListItem Value="3" Text="prog3" />
                                        <asp:ListItem Value="4" Text="Prog4" />
                                        <asp:ListItem Value="5" Text="Prog5" />
                                        <asp:ListItem Value="6" Text="Prog6" />
                                </asp:ListBox>
                            </div>

-后端

如果（this.ListBox1.Items.FindByValue（i.ToString（））！= null）

            {

                int intIndex = ListBox1.Items.IndexOf(ListBox1.Items.FindByValue(Convert.ToString(i.ToString())));

                if (this.ListBox1.Items[intIndex].Selected == true)

                {

                   choice = choice+ i.ToString() + ";";

                    counter+++;


                }

            }

如何使Dropdownlist有多个复选框？

4 个答案: