在 asp.net 中带有复选框的多选下拉列表

Posted 2023-03-05

【中文标题】在 asp.net 中带有复选框的多选下拉列表

【英文标题】：Multiselect dropdownlist with Checkbox in asp.net

【发布时间】：2015-03-22 02:51:57

【问题描述】：

我正在使用带有复选框的引导多选下拉列表。它在没有主表单的情况下运行良好。但它不适用于主表单：

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
        rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function() 
            $('[id*=lstFruits]').multiselect(
                includeSelectAllOption: true
            );
        );
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 <asp:ListBox ID="lstFruits" runat="server" SelectionMode="Multiple">
        <asp:ListItem Text="Mango" Value="1" />
        <asp:ListItem Text="Apple" Value="2" />
        <asp:ListItem Text="Banana" Value="3" />
        <asp:ListItem Text="Guava" Value="4" />
        <asp:ListItem Text="Orange" Value="5" />
    </asp:ListBox>
    <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Submit" />

</asp:Content>

C#代码：

 protected void Submit(object sender, EventArgs e)
    
        string message = "";
        foreach (ListItem item in lstFruits.Items)
        
            if (item.Selected)
            
                message += item.Text + " " + item.Value + "\\n";
            
        
        ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + message + "');", true);
    

我已经推荐了

this article:

通过使用此代码，我在页​​面上有一个下拉列表，但下拉单击事件没有触发，我看不到任何列表。 请帮助我解决这个问题。

【问题讨论】：

定义“不工作”

@tvanfosson 通过使用此代码，我在页​​面上有一个下拉列表，但下拉点击事件没有触发，我看不到任何列表。

浏览器控制台有错误吗？

@tvanfosson TypeError: $(...).uniform 不是函数

我最好的猜测是您缺少一些必需的脚本，或者它们以错误的顺序加载。深入研究引导代码并找到引用的位置，看看您是否能弄清楚需要什么。

【参考方案1】：

请删除前 2 个 <script> 和 2 个 <link> 标记，不要删除最后一个 <script> 和 <link> 标记。您的问题将得到解决。

【参考方案2】：

我知道这篇文章现在似乎有几个月了，但对于其他用户来说，这是解决方案。

首先，使用直接定义 id 的最佳实践，如下所示。 （您可能需要将 ClientID 模式设置为静态）

$('#lstFruits').multiselect( 包括全选选项：真 );

要触发 ListBox 选定的索引更改（我假设通过下拉单击事件您的意思是选定的索引更改）将列表框的 autopostback 属性设置为 true

更多详情可以参考以下链接 http://www.codewithasp.net/2015/04/jquery-multiselect-dropdown-in-aspnet.html