多重选择下拉列表中的jQuery

问题描述

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

<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，对此我几乎一无所知。 我正在寻找一些单击按钮时将显示和隐藏div的jquery，并在您单击其他任何地方时隐藏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();
    });
});

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

解决方法

事实证明，解决方案是摆脱对清单的服务器端处理，而使用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 \”时，我也在填充一个隐藏字段的值。当我发回邮件时，该字段的文本值将从隐藏的字段中恢复。 我希望这对其他人有用！