多选下拉列表中的 Jquery答案

【问题标题】：Jquery in Multi Select Drop down list多选下拉列表中的 Jquery
【发布时间】：2011-08-31 00:40:28
【问题描述】：

我已经将自己放在一个多选下拉列表用户控件中，如下所示：

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="multiTop" class="multiTop">
            <asp:Button ID="DropDownButton" CssClass="dropDownButton" Text="All" runat="server" />
        </div>
        <div ID="multiMain" class="multiMain" style="display:none">              
            <asp:Button ID="SelectAllButton" Text="All" runat="server" CssClass="allButton" OnClick="AllButton_Click" />
            <asp:CheckBoxList ID="MultiCheckBox" runat="server" RepeatDirection="Vertical" AutoPostBack="true"
            OnSelectedIndexChanged="MultiCheckBox_SelectedIndexChanged" CssClass="mutiCbl">
            </asp:CheckBoxList>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

首先，我使用服务器端事件来显示和隐藏“multiMain”面板（现在是一个 div），只要按下 DropDownButton。后来稍微摆弄一下 Css，整个事情看起来就像一个下拉列表。

然而，主要问题是如果用户点击页面上的其他任何地方，与真正的下拉列表不同，下拉部分并没有消失。因此，我怀着沉重的心情求助于 Jquery，对此我几乎一无所知。

我正在寻找一些 jquery，它会在单击按钮时显示和隐藏 div，并在单击其他任何位置时隐藏 div。到目前为止，我想出了：

$(document).ready(function () {
    var dropDownButton = $get('<%= DropDownButton.ClientID %>');
    var multiMain = $get('<%= multiMain.ClientID %>');       

    dropDownButton.click(function () {           
        if (multiMain.is(":hidden")) {
            multiMain.slideDown("slow");
        }
        else {
            multiMain.slideUp("slow");
        }
        return false;
    });


    $(document).click(function () {
        multiMain.hide();            
    });
    multiMain.click(function (e) {            
        e.stopPropagation();
    });
});

但是，单击下拉按钮或单击页面的其余部分时没有任何反应事件。有什么想法吗？

【问题讨论】：

您可以发布您的 ASPX 页面生成的 HTML 标记吗？另外，$get 是在哪里定义的？

标签： javascript jquery asp.net

【解决方案1】：

事实证明，解决方案是摆脱对清单的服务器端处理，并使用 Jquery 做更多的客户端。与其尝试获取控件的确切 ID（考虑到 asp.net 附加的内容可能会很困难），不如说一切都是按类完成的。使用的关键代码如下：

$("div.multiTop .dropDownButton").bind('click', function (e) {
    var masterDiv = $(this).parents("div.multiMaster");
    var multiMain = $("div.multiMain", masterDiv);        

    if (multiMain.is(":hidden")) {
        $("div.multiMain").hide();
        multiMain.show();
    }
    else {
        multiMain.hide();
    }        
    return false;
});

当单击看起来像下拉列表的按钮时，jquery 会查找页面上所有其他下拉 div 并隐藏它们，然后只显示当前的下拉 div。

$(".multiCbl").bind('change', function (e) {
    var masterDiv = $(this).parents("div.multiMaster");
    var multiMain = $(this).parents("div.multiMain");
    var names = [];

    $("input:checked", multiMain).each(function () {
        names.push(" " + $(this).next().text());
    });

    var text = names.toString();

    if (text.length == 0) {
        text = "All";
    }
    else if (text.length > 29) {
        text = text.substring(1, 29) + "...";
    }
    else {
        text = text.substring(1, text.length);
    }

    $(".dropDownButton", masterDiv).val(text);
    $(".dropDownButton", masterDiv).next().val(text);

    e.stopPropagation();
});

JQuery 现在还用于在单击或未单击复选框时填充按钮文本。事后看来，这样做要好得多，而不是在每次选中一个框时发回。

$(document).bind('click', function () {
    $("div.multiMain").hide();
});

$("div.multiMain").bind('click', function (e) {
    e.stopPropagation();
});

当单击下拉 div 本身以外的任何其他位置时，所有下拉 div 都将被隐藏。

唯一的其他重大变化是提醒人们按钮不会作为表单字段回发！因此，在您看到“.next().val”的地方，我也在填充隐藏字段的值。当我回帖时，该字段的文本值从隐藏字段中恢复。

我希望这对其他人有用！

【讨论】：