javascript 使用 jquery 动态选择多选列表框中的所有项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15230824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically select all items in a Multi-Select listbox using jquery
提问by RockiesMagicNumber
I'm very new to using Javascript/Jquery, so I appreciate you reading and your patience with what is likely a simple problem. This is a bit of a multi-tiered question, so let me explain.
我对使用 Javascript/Jquery 还很陌生，所以感谢您的阅读以及您对可能是一个简单问题的耐心。这是一个多层次的问题，所以让我解释一下。
I have several databound ASP listboxes. I also have several checkboxes, one for each listbox. I have the checkboxes wired, using Javascript, to select or deselect all the Listbox items on click.
我有几个数据绑定的 ASP 列表框。我也有几个复选框，每个列表框一个。我使用 Javascript 连接了复选框，以在单击时选择或取消选择所有列表框项目。
My goal was to construct a single method that will pass the checkbox and its corresponding listbox to the javascript method and either select or unselect everything in the listbox. I could do this very simply in C#, but we can't use a postback, as the page is already slow and complex.
我的目标是构建一个方法，将复选框及其相应的列表框传递给 javascript 方法，然后选择或取消选择列表框中的所有内容。我可以在 C# 中非常简单地做到这一点，但我们不能使用回发，因为页面已经很慢而且很复杂。
So this already WORKS in Javascript (and I'll post my code below this), but the problem I'm encountering is that when we have a longer listbox (that is, 20+ list items), IE essentially makes you watch as it scrolls through all of them and selects them all. Chrome doesn't have this problem, and Firefox is at least a lot faster, but IE is the browser a good 75%+ of our customers use.
所以这已经在 Javascript 中有效（我将在下面发布我的代码），但我遇到的问题是，当我们有一个更长的列表框（即 20 多个列表项）时，IE 基本上会让你看着它滚动浏览所有这些并选择它们。Chrome 没有这个问题，Firefox 至少要快很多，但 IE 是我们 75% 以上的客户使用的浏览器。
ASP:
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#:
C＃：
protected void Page_Load(object sender, EventArgs e)
{
SelectAllProjectStatusChkbx.Attributes.Add("onclick", "selectDeselect(" + StatusListBx.ClientID + ",this)");
}
Javascript:
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;
}
}
(I've replicated this for every applicable Listbox/Checkbox combination - it's a scalable task)
（我已经为每个适用的列表框/复选框组合复制了这个 - 这是一个可扩展的任务）
So to the actual questions:
所以对于实际问题：
Were I to utilize JQuery rather than Javascript for this functionality, would I be able to avoid that whole "scrolling/selecting" effect?
If I can avoid that scrolling effect, how can I dynamically pass the listbox to JQuery rather than having to write a custom method out for each Listbox/Checkbox combination?
如果我使用 JQuery 而不是 Javascript 来实现这个功能，我是否能够避免整个“滚动/选择”效果？
如果我可以避免这种滚动效果，如何将列表框动态传递给 JQuery 而不必为每个列表框/复选框组合编写自定义方法？
Thank you for reading and thank you for any help offered.
感谢您阅读并感谢您提供的任何帮助。
回答by Ravi Ram
Check out this post:
看看这个帖子：
http://www.craiglotter.co.za/2010/02/26/jquery-select-all-options-in-a-multiple-select-listbox/
http://www.craiglotter.co.za/2010/02/26/jquery-select-all-options-in-a-multiple-select-listbox/
jQuery: Select all options in a Multiple Select Listbox
jQuery：选择多选列表框中的所有选项
$("#multipleselect option").prop("selected",true);
A multiple select listbox with everything already selected for you!
一个多选列表框，已经为您选择了所有内容！
回答by codebyren
I don't have IE on hand to check the scrolling effect you are referring to but it should be easy enough for you to test. You could keep your selectDeselect function but it might change to something like this (assuming jQuery ~ 1.7.2+):
我手头没有 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);
}
I would expect the non-jQuery code to be faster but give it a go...
我希望非 jQuery 代码更快，但试一试......
Edit:The above is slow in IE too.
编辑：以上在 IE 中也很慢。
I'm not a fan of this method but you could try replacing the actual HTML in the select dropdown. Something like:
我不喜欢这种方法，但您可以尝试在选择下拉列表中替换实际的 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');
}
It seems to work in IE9: jsfiddle
它似乎在 IE9 中工作：jsfiddle
