logo标签列表

JQuery Select2 - 如何选择所有选项

jqueryjquery-select2
64

我正在使用jQuery select2多选下拉框。我需要从代码中选择下拉框中的所有选项。 基本上有一个“全选”复选框，需要实现此功能，我希望能够从该复选框中选择/取消选择选项。

21个回答
78

使用Select 2 演示

$("#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">

你需要的代码如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">
3
效果非常好。我只会过滤掉没有值的选项，否则你将得到空白选项。$("#e1 > option").filter(function() { return $(this).val().length; }); - stevenspiel
如果我删除了一些选项，选择框仍然被选中，如何使它们在更改某些选项后仍然被选中。 - shakyl mansuri
1
DEMO1: 如何修改此代码以使其仅选择搜索功能后的选项？例如，您搜索“ala”，它会显示Alabama和Amalapuram，然后我想要选择所有并仅选择这两个选项？ - pdolinaj
在Firefox 114中，删除所选选项的方法是：$("select > option").prop("selected","");。 - Santilín
37

这里的回答效果非常不错。

// Select all
$('#select-id').select2('destroy').find('option').prop('selected', 'selected').end().select2();

// Unselect all
$('#select-id').select2('destroy').find('option').prop('selected', false).end().select2();
2
超级简单的方法来加载和卸载Select2选项。谢谢。 - Raj
非常整洁和清晰的方法。 - Ibad Baig
有没有办法通过这个触发更改。 - talha2k
20

在 GitHub 的讨论帖中有一个描述。引用（https://github.com/ivaynberg/select2/issues/195#issuecomment-13489140 by 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", "");
        }
    }
});
@kkudi 在 GitHub 上询问作者。 - Piotr Stapp
我应该问作者什么？上面的代码对我完全不起作用。不确定原因。我已经调试了代码。我的数据是通过ajax加载的，不确定是否有任何区别。 - kkudi
我不确定这是否是我要求的行为。我想要的是，一旦您键入“be”，就会出现“bed”、“bee”、“bent”和“bell”的列表，并且您希望从列表中选择所有元素。 - kkudi
@kkudi，你仍然可以使用“全选”复选框来完成此操作，但正如Garath所说，你需要编写自己的逻辑。当用户输入“be”并单击“全选”时，标记所有以“be”开头的值为已选择状态。 - Ibad Baig
如果您正在使用underscore/lodash，您可以通过编程方式选择下拉列表中的所有选项，例如：$("#someId").val(_.pluck($("#someId option"), "value")).trigger("change"); - djKianoosh
9
请注意，当结果是通过 ajax 加载时，此代码将无法正常工作。 - sieppl
16

$(document).ready(function() {
    $("#my-select").select2();
});

function selectAll() {
    $("#my-select > option").prop("selected", true);
    $("#my-select").trigger("change");
}

function deselectAll() {
    $("#my-select > option").prop("selected", false);
    $("#my-select").trigger("change");
}
.button-container {
  margin-bottom: 10px;
}

#my-select {
  width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>

<div class="button-container">
  <button type="button" onclick="selectAll()">Select All</button>
  <button type="button" onclick="deselectAll()">Deselect All</button>
</div>
<select id="my-select" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="grape">Grape</option>
  <option value="pineapple">Pineapple</option>
</select>

这是最简单的方法。 
function selectAll() {
  $("#my-select > option").prop("selected", true);
  $("#my-select").trigger("change"); 
}
12

$(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 All

如果选项在AJAX请求之后创建，则这些选项将不起作用。所以我们使用 find 将它们映射到 select/unselect 中，然后触发 change 事件。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

$(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');
      }
  });
});

只需使用 find。

11

你可以为一个字符串做到它

$('select.your-select option').attr('selected', true).parent().trigger('change')
非常简短的选项！ - insign
虽然这一开始似乎可以工作，但插件似乎与其不兼容，并最终无法选择已被手动取消选择的内容。 - Ecksters
7

$('.select2').select2({
  placeholder: 'Press CTRL+A for select 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 item = $(that.parents("span[class*='select2-container']").siblings('select[multiple]'));

  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);
  item.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>

这是针对所有select2全局的，还是需要针对每个select2字段分别设置？ - Ishtiaq Ahmed
1
这适用于所有带有类.select2（在我的情况下）的select2字段。 您可以指定一个额外的类或属性，以仅针对有限数量的字段实现此功能。 - Mihai Ciobanu
1
这适用于所有具有类名为.select2的select2字段（在我的情况下）。您可以指定一个额外的类或属性，以仅对有限数量的字段实现此功能。 - Mihai Ciobanu
谢谢，@MihaiCiobanu 我已经尝试过了，完美地运行着，这是最好的解决方案。 - Ishtiaq Ahmed
谢谢，@MihaiCiobanu。我已经尝试过了，完美地运行了，这是最好的解决方案。 - Ishtiaq Ahmed
2

提示：gSiteIDs的值是在动态创建选择选项时使用的值。#selAllSites是复选框的ID，#siteID是您想要操作的选择列表的ID。

var gSiteIDs = "8475, 9082, 2387, 1234";

function selectAllSites() 
{
    if($("#selAllSites").is(":Checked")) {
        $("#siteID").select2("val", [gSiteIDs]);                                
    } else {
        $("#siteID").select2("val", []);                                
    }
}
1
这是我找到的最好的答案，其他的答案可能会让您进入一个潜在的非常出错的状态。 - Ecksters
请直接翻译以下与程序相关的内容：是的。其他任何内容都可能会损坏 select2 本身。您可以选择从元素本身获取值，即：var values = $.map($select2.find('option') ,function(option) { return option.value; }); - user2806026
1

自定义实现Select2中的全选功能 演示

function RunSelect2(){
  $('#select-id').select2({
     allowClear: true,
     closeOnSelect: false,
  }).on('select2:open', function() {  

    setTimeout(function() {
        $(".select2-results__option .select2-results__group").bind( "click", selectAlllickHandler ); 
    }, 0);

  });
}

RunSelect2();


var selectAlllickHandler = function() {
 $(".select2-results__option .select2-results__group").unbind( "click", selectAlllickHandler );        
  $('#select-id').select2('destroy').find('option').prop('selected', 'selected').end();
  RunSelect2();
};
.select2-results__group
{
  cursor:pointer !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>

<select multiple id='select-id' style="width:300px">
    <optgroup label="select all">
      <option value='1'>1 one</option>
      <option value='2'>2 two</option>
      <option value='3'>3 three</option>
      <option value='4'>4 four</option>
      <option value='5'>5 five</option>
      <option value='6'>6 six</option>
    </optgroup>
</select>

1

@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", []);
        }
    }
});
@Jim 鼠标单击是否有全选功能？ - shorif2000
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，