我将自己放在一个多选下拉列表用户控件中,如下所示:
<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/