我將自己放在一個多選下拉列表用戶控件中,如下所示:
<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”面板(現(xiàn)在為div).稍后Css擺弄了一下,整個過程看起來像一個下拉列表.
但是,主要問題是,如果用戶單擊頁面上的其他任何位置(與真正的下拉列表不同),則下拉部分不會消失.因此,我全神貫注地轉向了Jquery,對此我?guī)缀跻粺o所知.
我正在尋找一些jquery,當單擊該按鈕時將顯示和隱藏div,并在您單擊其他任何位置時隱藏div.到目前為止,我已經(jīng)提出了:
$(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(); });});
但是,當單擊下拉按鈕或單擊頁面的其余部分時,什么也沒有發(fā)生.我在頁面上有多個多選下拉列表,我真的不確定如何整理事件.有任何想法嗎?
解決方法:
事實證明,解決方案是擺脫對清單的服務器端處理,而使用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();});
現(xiàn)在,當單擊或取消選中復選框時,JQuery還可用于填充按鈕文本.在事后看來,這樣做要好得多,而不是每次選中一個框都回發(fā)一次.
$(document).bind('click', function () { $("div.multiMain").hide();});$("div.multiMain").bind('click', function (e) { e.stopPropagation();});
如果單擊除下拉div本身以外的其他任何位置,則所有下拉div均被隱藏.
唯一的主要變化是提醒人們按鈕不會作為表單字段發(fā)回!因此,當您看到“ .next().val”時,我也在填充一個隱藏字段的值.當我發(fā)回郵件時,該字段的文本值將從隱藏的字段中恢復.
我希望這對其他人有用!
來源:https://www.icode9.com/content-1-589001.html