如何使用配置了ajax搜索的select2 jquery插件实现选择所有功能。？

Question

我目前使用 select2 jquery 插件从 ajax 调用动态填充的列表中选择数据。我需要实现全选功能，以便用户能够使用全选按钮一次选择所有选项。我试图在 jsfidde 中按照这个例子来实现这个。

Click here to see the jsfiddle

但是对于选择大量项目的列表说 500 项目。它会使浏览器挂起一段时间。请提出一种更好的方法来实现这一点，而不会出现任何性能问题。

$.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">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").select2({
placeholder: "Select Option(s)...",
dropdownAdapter: Utils.Decorate(
  Utils.Decorate(
    Dropdown,
    AttachBody
  ),
  SelectAll
  ),
  });
 });

Answer 1

这是重复的问题 JQuery Select2 - How to select all options

为带有复选框的多选给出的解决方案。

如果它的负载比你应该添加额外的隐藏文件来获得逗号分隔值。

试试下面的代码。 HTML：

<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>
<br>
<input type="checkbox" id="checkbox" >Select All
<br>
<input type="text" id="valueall" value="" name="valueall">

jQuery :

$("#e1").select2();
$("#checkbox").click(function(){
    if($("#checkbox").is(':checked') ){
        $("#e1 > option").prop("selected","selected");
        <!-- $("#e1").trigger("change"); -->
        $("#e1").select2('destroy'); 
        $("#e1").hide(); 
        $("#valueall").val($("#e1").val())
    }else{
        $("#e1 > option").removeAttr("selected");
         <!-- $("#e1").trigger("change"); -->
         $("#e1").select2(); 
        $("#e1").show(); 
         $("#valueall").val($("#e1").val())
     }
});

您可以为输入字段设置 type="hidden"。