在 Asp.Net 中，如何在不按 CTRL 的情况下在 ListBox 中多选项目？答案

【问题标题】：How to multiple select item in ListBox without press CTRL in Asp.Net?在 Asp.Net 中，如何在不按 CTRL 的情况下在 ListBox 中多选项目？
【发布时间】：2015-11-04 13:37:43
【问题描述】：

我想在ListBox 中选择多个项目，但是浏览器要求用户按 CTRL 选择多个项目，否则它只会选择一个项目。

我想在不按 CTRL 的情况下选择多个项目，并且我不想使用 CheckBoxList。有没有更好的方法呢？使用纯 javascript、JQuery 或 Codebehind。

（我已经为ListBox控件添加了SelectionMode="Multiple"属性）

代码：

    <asp:ListBox ID="ListBox1" runat="server" Height="210px" Width="203px" SelectionMode="Multiple">
        <asp:ListItem>1000</asp:ListItem>
        <asp:ListItem>2000</asp:ListItem>
        <asp:ListItem>4000</asp:ListItem>
        <asp:ListItem>4000</asp:ListItem>
        <asp:ListItem>5000</asp:ListItem>
        <asp:ListItem>6000</asp:ListItem>
    </asp:ListBox>

【问题讨论】：

查看此链接Making a standard ASP.NET listbox do multiselect without holding Ctrl。我刚刚尝试过，对我来说效果很好。
此项目是否使用 .NET Framework v2？在更高版本的框架中，Multiple 不再需要 ctrl，而是为 v2 功能提供了“扩展”功能。

标签： javascript c# jquery asp.net listbox

【解决方案1】：

参考：Making a standard ASP.NET listbox do multiselect without holding Ctrl

只需将您的列表框更改为

<asp:ListBox ID="ListBox1" runat="server" Height="210px" Width="203px" SelectionMode="Multiple" onclick="ListBoxClient_SelectionChanged(this, event);">
        <asp:ListItem>1000</asp:ListItem>
        <asp:ListItem>2000</asp:ListItem>
        <asp:ListItem>4000</asp:ListItem>
        <asp:ListItem>4000</asp:ListItem>
        <asp:ListItem>5000</asp:ListItem>
        <asp:ListItem>6000</asp:ListItem>
</asp:ListBox>

并在您的<script> 标签中添加以下脚本

<script type="text/javascript" language="javascript">
        var selectedClientPermissions = [];

        function pageLoad() {
            var ListBox1 = document.getElementById("<%= ListBox1.ClientID %>");

            for (var i = 0; i < ListBox1.length; i++) {
                selectedClientPermissions[i] = ListBox1.options[i].selected;
            }
        }

        function ListBoxClient_SelectionChanged(sender, args) {
            var scrollPosition = sender.scrollTop;

            for (var i = 0; i < sender.length; i++) {
                if (sender.options[i].selected) selectedClientPermissions[i] = !selectedClientPermissions[i];

                sender.options[i].selected = selectedClientPermissions[i] === true;
            }

            sender.scrollTop = scrollPosition;
        }
</script>

【讨论】：

【解决方案2】：

如果您使用的是 jquery，只需添加以下脚本：

$('option').mousedown(function(e) {
        e.preventDefault();
        $(this).prop('selected', !$(this).prop('selected'));
        return false;
     });

【讨论】：