JQuery Select2 - 如何选择所有选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16538399/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-26 17:19:33 来源:igfitidea点击:
JQuery Select2 - How to select all options
提问by Ibad Baig
I'm using jQuery select2 multi select dropdown. I need to select all options in a dropdown from code. Basically there is a Select All checkbox on which this functionality has to be implemented, I want to select/deselect options from this checkbox.
我正在使用 jQuery select2 多选下拉菜单。我需要从代码的下拉列表中选择所有选项。基本上有一个全选复选框，必须在其上实现此功能，我想从此复选框中选择/取消选择选项。
采纳答案by Piotr Stapp
There is a description in thread on github. Quoting (https://github.com/ivaynberg/select2/issues/195#issuecomment-13489140by MortadaAK) which allows you to select everything on ctrl+a
github上的线程中有描述。引用（https://github.com/ivaynberg/select2/issues/195#issuecomment-13489140by MortadaAK）它允许您在 ctrl+a 上选择所有内容
$(document).on("keypress",".select2-input",function(event){
if (event.ctrlKey || event.metaKey) {
var id =$(this).parents("div[class*='select2-container']").attr("id").replace("s2id_","");
var element =$("#"+id);
if (event.which == 97){
var selected = [];
element.find("option").each(function(i,e){
selected[selected.length]=$(e).attr("value");
});
element.select2("val", selected);
} else if (event.which == 100){
element.select2("val", "");
}
}
});
回答by rahul maindargi
using Select 2 DEMO
使用 Select 2 DEMO
$("#e1").select2();
$("#checkbox").click(function(){
if($("#checkbox").is(':checked') ){
$("#e1 > option").prop("selected","selected");// Select All Options
$("#e1").trigger("change");// Trigger change to select 2
}else{
$("#e1 > option").removeAttr("selected");
$("#e1").trigger("change");// Trigger change to select 2
}
});
$("#button").click(function(){
alert($("#e1").val());
});
<select multiple id="e1" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<input type="checkbox" id="checkbox" >Select All
<input type="button" id="button" value="check Selected">
You need code As shown in DEMO2for Simple Select
您需要代码如DEMO2所示用于简单选择
$("#checkbox").click(function(){
if($("#checkbox").is(':checked') ){
$("select > option").prop("selected","selected");
}else{
$("select > option").removeAttr("selected");
}
});
$("#button").click(function(){
alert($("select").val());
});
<select multiple size=2>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select> <input type="checkbox" id="checkbox" >Select All
<input type="button" id="button" value="check Selected">
回答by Alliswell
回答by Vladowski
you could do it for one string
你可以用一根绳子做
$('select.your-select option').attr('selected', true).parent().trigger('change')
回答by Riiwo
$(document).ready(function() {
$("#checkbox").click(function(){
if($("#checkbox").is(':checked') ){ //select all
$("#e1").find('option').prop("selected",true);
$("#e1").trigger('change');
} else { //deselect all
$("#e1").find('option').prop("selected",false);
$("#e1").trigger('change');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple id="e1" style="width:300px">
<option value="AL">Alabama</option> //AJAX created
<option value="Am">Amalapuram</option> //AJAX created
<option value="An">Anakapalli</option> //AJAX created
<option value="Ak">Akkayapalem</option> //AJAX created
<option value="WY">Wyoming</option> //AJAX created
</select>
<input type="checkbox" id="checkbox" >Select AllIf options are created after AJAX request then these options don't work. So we map them with find and select/unselect them , after that trigger change.
如果在 AJAX 请求之后创建选项，则这些选项不起作用。因此，在触发更改之后，我们使用 find 和 select/unselect them 映射它们。
HTML
HTML
<select multiple id="e1" style="width:300px">
<option value="AL">Alabama</option> //AJAX created
<option value="Am">Amalapuram</option> //AJAX created
<option value="An">Anakapalli</option> //AJAX created
<option value="Ak">Akkayapalem</option> //AJAX created
<option value="WY">Wyoming</option> //AJAX created
</select>
<input type="checkbox" id="checkbox" >Select All
JS
JS
$(document).ready(function() {
$("#checkbox").click(function(){
if($("#checkbox").is(':checked') ){ //select all
$("#e1").find('option').prop("selected",true);
$("#e1").trigger('change');
} else { //deselect all
$("#e1").find('option').prop("selected",false);
$("#e1").trigger('change');
}
});
});
just use find.
只需使用查找。
回答by Mihai Ciobanu
$('.select2').select2({
placeholder: 'Press CTRL+A for selecr or unselect all options'
});
$('.select2[multiple]').siblings('.select2-container').append('<span class="select-all"></span>');
$(document).on('click', '.select-all', function (e) {
selectAllSelect2($(this).siblings('.selection').find('.select2-search__field'));
});
$(document).on("keyup", ".select2-search__field", function (e) {
var eventObj = window.event ? event : e;
if (eventObj.keyCode === 65 && eventObj.ctrlKey)
selectAllSelect2($(this));
});
function selectAllSelect2(that) {
var selectAll = true;
var existUnselected = false;
var id = that.parents("span[class*='select2-container']").siblings('select[multiple]').attr('id');
var item = $("#" + id);
item.find("option").each(function (k, v) {
if (!$(v).prop('selected')) {
existUnselected = true;
return false;
}
});
selectAll = existUnselected ? selectAll : !selectAll;
item.find("option").prop('selected', selectAll).trigger('change');
}.select2-container {
width: 90% !important;
}
.select2-container .select-all {
position: absolute;
top: 6px;
right: 4px;
width: 20px;
height: 20px;
margin: auto;
display: block;
background: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNDc0LjggNDc0LjgwMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc0LjggNDc0LjgwMTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zOTYuMjgzLDI1Ny4wOTdjLTEuMTQtMC41NzUtMi4yODItMC44NjItMy40MzMtMC44NjJjLTIuNDc4LDAtNC42NjEsMC45NTEtNi41NjMsMi44NTdsLTE4LjI3NCwxOC4yNzEgICAgYy0xLjcwOCwxLjcxNS0yLjU2NiwzLjgwNi0yLjU2Niw2LjI4M3Y3Mi41MTNjMCwxMi41NjUtNC40NjMsMjMuMzE0LTEzLjQxNSwzMi4yNjRjLTguOTQ1LDguOTQ1LTE5LjcwMSwxMy40MTgtMzIuMjY0LDEzLjQxOCAgICBIODIuMjI2Yy0xMi41NjQsMC0yMy4zMTktNC40NzMtMzIuMjY0LTEzLjQxOGMtOC45NDctOC45NDktMTMuNDE4LTE5LjY5OC0xMy40MTgtMzIuMjY0VjExOC42MjIgICAgYzAtMTIuNTYyLDQuNDcxLTIzLjMxNiwxMy40MTgtMzIuMjY0YzguOTQ1LTguOTQ2LDE5LjctMTMuNDE4LDMyLjI2NC0xMy40MThIMzE5Ljc3YzQuMTg4LDAsOC40NywwLjU3MSwxMi44NDcsMS43MTQgICAgYzEuMTQzLDAuMzc4LDEuOTk5LDAuNTcxLDIuNTYzLDAuNTcxYzIuNDc4LDAsNC42NjgtMC45NDksNi41Ny0yLjg1MmwxMy45OS0xMy45OWMyLjI4Mi0yLjI4MSwzLjE0Mi01LjA0MywyLjU2Ni04LjI3NiAgICBjLTAuNTcxLTMuMDQ2LTIuMjg2LTUuMjM2LTUuMTQxLTYuNTY3Yy0xMC4yNzItNC43NTItMjEuNDEyLTcuMTM5LTMzLjQwMy03LjEzOUg4Mi4yMjZjLTIyLjY1LDAtNDIuMDE4LDguMDQyLTU4LjEwMiwyNC4xMjYgICAgQzguMDQyLDc2LjYxMywwLDk1Ljk3OCwwLDExOC42Mjl2MjM3LjU0M2MwLDIyLjY0Nyw4LjA0Miw0Mi4wMTQsMjQuMTI1LDU4LjA5OGMxNi4wODQsMTYuMDg4LDM1LjQ1MiwyNC4xMyw1OC4xMDIsMjQuMTNoMjM3LjU0MSAgICBjMjIuNjQ3LDAsNDIuMDE3LTguMDQyLDU4LjEwMS0yNC4xM2MxNi4wODUtMTYuMDg0LDI0LjEzNC0zNS40NSwyNC4xMzQtNTguMDk4di05MC43OTcgICAgQzQwMi4wMDEsMjYxLjM4MSw0MDAuMDg4LDI1OC42MjMsMzk2LjI4MywyNTcuMDk3eiIgZmlsbD0iIzAwMDAwMCIvPgoJCTxwYXRoIGQ9Ik00NjcuOTUsOTMuMjE2bC0zMS40MDktMzEuNDA5Yy00LjU2OC00LjU2Ny05Ljk5Ni02Ljg1MS0xNi4yNzktNi44NTFjLTYuMjc1LDAtMTEuNzA3LDIuMjg0LTE2LjI3MSw2Ljg1MSAgICBMMjE5LjI2NSwyNDYuNTMybC03NS4wODQtNzUuMDg5Yy00LjU2OS00LjU3LTkuOTk1LTYuODUxLTE2LjI3NC02Ljg1MWMtNi4yOCwwLTExLjcwNCwyLjI4MS0xNi4yNzQsNi44NTFsLTMxLjQwNSwzMS40MDUgICAgYy00LjU2OCw0LjU2OC02Ljg1NCw5Ljk5NC02Ljg1NCwxNi4yNzdjMCw2LjI4LDIuMjg2LDExLjcwNCw2Ljg1NCwxNi4yNzRsMTIyLjc2NywxMjIuNzY3YzQuNTY5LDQuNTcxLDkuOTk1LDYuODUxLDE2LjI3NCw2Ljg1MSAgICBjNi4yNzksMCwxMS43MDQtMi4yNzksMTYuMjc0LTYuODUxbDIzMi40MDQtMjMyLjQwM2M0LjU2NS00LjU2Nyw2Ljg1NC05Ljk5NCw2Ljg1NC0xNi4yNzRTNDcyLjUxOCw5Ny43ODMsNDY3Ljk1LDkzLjIxNnoiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K') no-repeat center;
background-size: contain;
cursor: pointer;
z-index: 999999;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<select class="select2" multiple id="my-select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>回答by sieppl
@Garath: I have tweaked your posted code in order to make it work with results that are loaded via ajax. Thank you for bringing this up here.
@Garath：我已经调整了您发布的代码，以使其能够处理通过 ajax 加载的结果。谢谢你在这里提出这个问题。
$(document).on("keypress",".select2-input",function(event){
if (event.ctrlKey || event.metaKey) {
var id =$(this).parents("div[class*='select2-container']").attr("id").replace("s2id_","");
var element =$("#"+id);
if (event.which == 97){
var selected = [];
$('.select2-drop-active').find("ul.select2-results li").each(function(i,e){
selected.push($(e).data("select2-data"));
});
element.select2("data", selected);
} else if (event.which == 100){
element.select2("data", []);
}
}
});
回答by Jeff
Info: The values for gSiteIDs are the values used when originally dynamically creating the select options. #selAllSites is the id of a checkbox and #siteID is the id of the select list you want to manipulate.
信息：gSiteID 的值是最初动态创建选择选项时使用的值。#selAllSites 是复选框的 id，#siteID 是要操作的选择列表的 id。
var gSiteIDs = "8475, 9082, 2387, 1234";
function selectAllSites()
{
if($("#selAllSites").is(":Checked")) {
$("#siteID").select2("val", [gSiteIDs]);
} else {
$("#siteID").select2("val", []);
}
}
回答by Maciej Niemir
This works great with AJAX, prevents from opening Bookmarks window in FF (Ctrl-D), and works fine when closeOnSelect is set to off.
这适用于 AJAX，防止在 FF (Ctrl-D) 中打开书签窗口，并且在 closeOnSelect 设置为关闭时工作正常。
$(document).on("keypress",".select2-input",function(event){
if (event.ctrlKey || event.metaKey) {
var id =$(this).parents("div[class*='select2-container']").attr("id").replace("s2id_","");
var element =$("#"+id);
if (event.which == 97){
var selected = [];
$('.select2-drop-active').find("ul.select2-results li").each(function(i,e){
selected.push($(e).data("select2-data"));
});
element.select2("data", selected);
element.select2("focus");
event.preventDefault();
} else if (event.which == 100){
element.select2("data", []);
event.preventDefault();
}
}
});
回答by codelover
just look this jsFiddle i created , sure this is the answer all you searched
看看我创建的这个 jsFiddle，确定这就是你搜索的所有答案
Select2 Multiple dropdown with select all property
$(".checkbox").click(function(){
if($(".checkbox").is(':checked') ){
$(this).parent().find('option').prop("selected","selected");
$(this).parent().find('option').trigger("change");
$(this).parent().find('option').click();
}else{
$(this).parent().find('option').removeAttr("selected","selected");
$(this).parent().find('option').trigger("change");
}
});
$("#button").click(function(){
alert($("select").val());
});
$(document).ready(function() {
$('.select2').select2({
closeOnSelect: false,
allowClear:false
});
});<div>
<select multiple size=2 class="select2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select> <input type="checkbox" class="checkbox" >Select All
</div>
<div>
<select multiple size=2 class="select2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select> <input type="checkbox" class="checkbox" >Select All
</div>