JQuery Select2 - 如何选择所有选项

Question

我正在使用 jQuery select2 多选下拉列表。我需要从代码中选择下拉列表中的所有选项。基本上有一个全选复选框，必须在其上实现此功能，我想从此复选框中选择/取消选择选项。

Answer 1

使用选择 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">

Answer 2

来自here的答案非常好。

// 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();

Answer 3

github上的thread中有描述。引用（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", "");
        }
    }
});

Answer 4

$(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/[email protected]/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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"); 
}

Answer 5

$(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 请求之后创建的，那么这些选项不起作用。因此，在触发更改后，我们使用查找和选择/取消选择它们来映射它们。

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

只需使用查找即可。

Answer 6

你可以用一根弦来完成

$('select.your-select option').attr('selected', true).parent().trigger('change')

Answer 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>

Answer 8

信息：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", []);                                
    }
}

Answer 9

@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", []);
        }
    }
});

Answer 10

select2 中全选的自定义实现DEMO

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>

Answer 11

2019年更新

要以编程方式为 Select2 控件选择选项/项目，请使用 jQuery

.val()

方法。

您还可以传递一个数组到

val

进行多项选择：

$('#mySelect2').val(['1', '2']);
$('#mySelect2').trigger('change');

https://select2.org/programmatic-control/add-select-clear-items#selecting-options

Answer 12

请看下面的代码。

$('.select2').select2({
    formatResult:function(object, container, query){
        if(object.id=='all' || object.id=='clear')
            return '<span style="color:#31708F;font-size:10px;"><i class="fa fa-chevron-right"></i> '+object.text+'</span>';

        return object.text;
    }
});
$('.select2').on("change", function(e) {
    if($.inArray('all', e.val)===0){
        var selected = [];
        $(this).find("option").each(function(i,e){
            if($(e).attr("value")=='all' || $(e).attr("value")=='clear')
                return true;

            selected[selected.length]=$(e).attr("value");
        });
        $(this).select2('val',selected);
    }else if($.inArray('clear', e.val)===0){
        $(this).select2('val','');
    }
});

参考来源：https://github.com/select2/select2/issues/195#issuecomment-52163095

Answer 13

这对于 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();
        }
    }
});

Answer 14

$.fn.select2.amd.require([
    'select2/utils',
    'select2/dropdown',
    'select2/dropdown/attachBody'
], function (Utils, Dropdown, AttachBody) {
    function SelectAll() { }

    SelectAll.prototype.render = function (decorated) {
        var $rendered = decorated.call(this);
        var self = this;

        var $selectAll = $(
            '<button type="button" style="width: 100%; height: 3rem; text-align: left; color: blue; background: none; border: none; box-shadow: none">Select All</button>'
        );

        $rendered.find('.select2-dropdown').prepend($selectAll);

        $selectAll.on('click', function (e) {
            var $results = $rendered.find('.select2-results__option[aria-selected=false]');

            // Get all results that aren't selected
            $results.each(function () {
                var $result = $(this);

                // Get the data object for it
                var data = $result.data('data');

                // Trigger the select event
                self.trigger('select', {
                    data: data
                });
            });

            self.trigger('close');
        });

        return $rendered;
    };

    $("#select-id").select2({
        placeholder: "Select weekdays...",
        allowClear: true,
        dropdownAdapter: Utils.Decorate(
            Utils.Decorate(
                Dropdown,
                AttachBody
            ),
            SelectAll
        )
    });
});

源代码：http://jsbin.com/seqonozasu/1/edit?html,js,output

Answer 15

看看我创建的这个 jsFiddle，确定这就是您搜索的答案

Select2 具有选择所有属性的多个下拉列表

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

Answer 16

如果您需要为此操作设置一个复选框，只需简单地执行此操作即可。

<select id="myselect" multiple="multiple">
  <option value="level1">Level 1</option>
  <option value="level2">Level 2</option>
  <option value="level3">Level 3</option>
  <option value="level4">Level 4</option>
</select>

<br/>
Select/Deselect <input type="checkbox" id="selectall"/>

Jquery 函数：

$("#selectall").on('click',function(){
    var checked = $("#selectall").prop("checked");
  if(checked==true){
    $("#myselect > option").prop("selected",true);
  }else{
    $("#myselect > option").prop("selected",false);
  }
});

Answer 17

改变

$result.data('data');

到

Utils.GetData($result.get(0),'data')

Answer 18

这行代码将选择所有选项

$('select.select-all-class-name').attr('selected', true).parent().trigger('change');

添加适用于所有场景的选择事件。当您选择和取消选择一个选项，然后单击 selectAll 时，上面的行会失败。最后取消选择的选项将不会被选择。为了解决这个问题，请添加以下代码行。

//Select options selected true for the selected option
$('#mySelect2').on('select2:selecting', function (e) {
    $('select#mySelect2ID > option[value="'+e.params.args.data.id+'"]').attr('selected', true);
});

//DeSelect options selected to false for the option deselected
$('#mySelect2').on('select2:unselecting', function (e) {
    $('select#mySelect2ID > option[value="'+e.params.args.data.id+'"]').attr('selected', false);
});

Answer 19

select2 只需要关闭并再次打开即可更新其选择的值。没必要毁掉它。

$('#select-id').find('option').prop('selected', 'selected');

if ($('#select-id').data('select2').isOpen()) {
    $('#select-id').select2('close').select2('open');
}

Answer 20

Select2：使用单击事件选择所有选项并取消选择所有选项

$('#category_id').select2({
  placeholder: "Select Category",
  allowClear: false,
  multiple: true, // Search
});
$('#category_id').siblings('.select2-container').append('<span class="select-all"><i class="fa-regular fa-square-check"></i></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 .select-all {
    z-index: 3;
    color: #46c484;
    font-size: 18px;
    top: 0.35rem;
    right: 0.65rem;
    cursor: pointer;
    position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<!-- Fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Select2 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<div style="padding:30px;">
  <select class="form-control" multiple id="category_id" style="width:300px">
    <option value="1">Category A</option>
    <option value="2">Category B</option>
    <option value="3">Category C</option>
    <option value="4">Category D</option>
    <option value="5">Category E</option>
  </select>
</div>

Answer 21

这段代码对我有用

$(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").val(null).trigger('change');
  }

}）； });

JQuery Select2 - 如何选择所有选项

问题描述投票：0回答：21

21个回答

最新问题

JQuery Select2 - 如何选择所有选项

问题描述 投票：0回答：21

21个回答

最新问题

问题描述投票：0回答：21