多选下拉列表中的Jquery

Question

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

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

首先，每当按下DropDownButton时，我都使用服务器端事件来显示和隐藏“multiMain”面板（现在是div）。 有点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();
    });
});

但是，当单击下拉按钮时，或者单击页面的其余部分时，没有任何事情发生。我在页面上有几个这样的多选下拉列表，我真的不确定如何整理事件。 有任何想法吗？

Answer 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”时，我也会填充隐藏字段的值。 当我回发时，该字段的文本值将从隐藏字段中恢复。

我希望这对其他人有用！