免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
javascript-多選擇下拉列表中的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”面板(現(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
本站僅提供存儲服務,所有內容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權內容,請點擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
Jquery EasyUi實戰(zhàn)教程布局篇
一個強大的jquery分頁插件
jquery類操作
Asp.net MVC2.0系列文章-添加操作
jquery實現(xiàn)ajax提交form表單的方法總結
Jquery實例
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服