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

我希望这对其他人有用！

多选下拉列表中的Jquery

1 个答案: