如何在 ASP 中制作自动回发多选列表框？

Posted 2023-03-21

【中文标题】如何在 ASP 中制作自动回发多选列表框？

【英文标题】：How to make autopostback Multiselect ListBox in ASP?

【发布时间】：2022-01-09 21:03:54

【问题描述】：

我正在尝试使用带有 Bootstrap Multiselect 样式的 ListBox 控件在 ASP.NET 中创建一个多选 ListBox。

在外观方面，它运作良好。我可以将其切换为下拉，我可以选择和取消选择选项并关闭它。

<asp:ListBox ID="NameListBox" runat="server" CssClass="multiselect" SelectionMode="Multiple" OnSelectedIndexChanged="NameListBox_SelectedIndexChanged">
    <asp:ListItem Text="Name 1" />
    <asp:ListItem Text="Name 2" />
    <asp:ListItem Text="Name 3" />
    <asp:ListItem Text="Name 4" />
    <asp:ListItem Text="Name 5" />
    <asp:ListItem Text="Name 6" />
</asp:ListBox>

我遇到的问题是进行回发并处理新选择的项目。我写了一个 OnSelectedIndexChanged，在其中循环遍历选定的项目并将它们插入数据库，但我不知道何时以及如何运行它。我知道我可以有一个单独的按钮来导致回发并保存所选项目，但我想在关闭 ListBox 时导致自动回发。

问题是，如果我使用 AutoPostBack="true"，那么每次选项更改都会发生回发，因此用户无法选择更多选项，只能一次保存。我只想在下拉列表实际关闭时进行回发。

经过多次尝试，我得到了这个：

$('.multiselect').multiselect(
            nonSelectedText: '',
            nSelectedText: 'selected',
            allSelectedText: 'Everyone',
            numberDisplayed: 2,
            buttonTextAlignment: 'left',
            buttonWidth: 240,
            onDropdownHidden: function (event) 
                __doPostBack($(event.target).parent().children('.multiselect').attr('id'), '');
            
            );

这会导致关闭列表框的下拉列表后进行回发，这很好。但遗憾的是，NameListBox_SelectedIndexChanged 事件处理程序在回发期间没有被触发，所以什么也没有发生。

有什么建议吗？

【参考方案1】：

希望对你有帮助~

<asp:ListBox ID="DropDownList_ExportCountry" runat="server" SelectionMode="Multiple" OnSelectedIndexChanged="DropDownList_ExportCountry_SelectedIndexChanged"></asp:ListBox>

在html

之后

<script type="text/javascript">
$('[id*=DropDownList_ExportCountry]').multiselect(
        onDropdownHide: function (event) 
            __doPostBack();//__doPostBack($(event.target).parent().children('#DropDownList_ExportCountry').attr('id'), '')
        
    );

记得在

中包含这样的 js 和 Css

<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>

【讨论】：

从那以后我已经解决了，但是是的，这就是我最终要做的。就像您的示例一样通过 javascript 进行回发。