我很擅长使用Javascript / Jquery,所以我感谢您的阅读以及您对可能是一个简单问题的耐心。这是一个多层次的问题,所以让我解释一下。
我有几个数据绑定ASP列表框。我还有几个复选框,每个列表框一个。我有使用Javascript连接的复选框,以便在点击时选择或取消选择所有列表框项目。
我的目标是构建一个方法,将复选框及其相应的列表框传递给javascript方法,并选择或取消选择列表框中的所有内容。我可以在C#中非常简单地执行此操作,但我们无法使用回发,因为页面已经很慢而且很复杂。
所以这已经在Javascript中运行了(我将在此下面发布我的代码),但我遇到的问题是,当我们有一个更长的列表框(即20多个列表项)时,IE基本上会让你观看它滚动所有这些并选择它们。 Chrome没有这个问题,Firefox至少要快得多,但IE浏览器是我们客户使用的75%+。
ASP:
<asp:ListBox ID="StatusListBx" runat="server" DataSourceID="StatusLds"
DataTextField="Status" DataValueField="StatusID" Width="140px" Height="55px" AppendDataBoundItems="true"
SelectionMode="Multiple"/>
<asp:LinqDataSource ID="StatusLds" runat="server"
ContextTypeName="ElementDataConnector.ElementDBDataContext"
Select="new (StatusID, Status)" Where="StatusID < 4" TableName="Lookup_Status" >
</asp:LinqDataSource>
<br />
<asp:CheckBox id="SelectAllProjectStatusChkbx" runat="server" Text="Select All" />
C#:
protected void Page_Load(object sender, EventArgs e)
{
SelectAllProjectStatusChkbx.Attributes.Add("onclick", "selectDeselect(" + StatusListBx.ClientID + ",this)");
}
使用Javascript:
function selectDeselect(listbox, checkbox) {
if (checkbox.checked) {
var multi = document.getElementById(listbox.id);
for (var i = 0; i < multi.options.length; i++) {
multi.options[i].selected = true;
}
} else {
var multi = document.getElementById(listbox.id);
multi.selectedIndex = -1;
}
}
(我已经为每个适用的Listbox / Checkbox组合复制了这个 - 这是一个可扩展的任务)
所以对于实际问题:
如果我使用JQuery而不是Javascript来实现此功能,我是否可以避免整个“滚动/选择”效果?
如果我可以避免滚动效果,如何动态地将列表框传递给JQuery,而不必为每个Listbox / Checkbox组合编写自定义方法?
感谢您阅读并感谢您提供的任何帮助。
答案 0 :(得分:7)
看看这篇文章:
http://www.craiglotter.co.za/2010/02/26/jquery-select-all-options-in-a-multiple-select-listbox/
jQuery:选择多选列表框中的所有选项
$("#multipleselect option").prop("selected",true);
多选列表框,已为您选择了所有内容!
答案 1 :(得分:4)
我手头没有IE来检查你所指的滚动效果,但它应该很容易让你测试。你可以保留你的selectDeselect函数,但它可能会改变为这样的东西(假设jQuery~1.7.2 +):
function selectDeselect(listbox, checkbox) {
var select_all = $(checkbox).prop('checked') ? true : false;
var select = $(listbox);
$('option', select).prop('selected', select_all);
}
我希望非jQuery代码更快但是可以试一试......
编辑:以上在IE中也很慢。
我不是这种方法的粉丝,但您可以尝试替换选择下拉列表中的实际HTML。类似的东西:
function selectDeselect(listbox, checkbox) {
var select_all = $(checkbox).prop('checked') ? true : false;
var select = $(listbox);
if (select_all) {
var clone = select.clone();
$('option', clone).attr('selected', select_all);
var html = clone.html();
select.html(html);
}
else $('option', select).removeAttr('selected');
}
它似乎适用于IE9:jsfiddle