我将自己放在一个多选下拉列表用户控件中,如下所示:

<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();
    });
});

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

最佳答案

事实证明,解决方案是摆脱 list 的服务器端处理,而使用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”时,我也在填充一个隐藏字段的值。当我回发时,该字段的文本值从隐藏的字段中恢复。

我希望这对其他人有用!

关于javascript - 多选下拉列表中的jQuery,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6095455/

10-12 12:42
查看更多