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

Posted 2023-05-07

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

【英文标题】：How to implement select all functionality with select2 jquery plugin configured with ajax search.?

【发布时间】：2017-09-05 02:18:30

【问题描述】：

我目前使用 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
  ),
  );
 );

【参考方案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"。

【讨论】：

是的，但是他说它工作正常，但是当我们选择更多 den 500 项时，这会使浏览器挂起。

@Parth 不，我需要确保浏览器不会在选择大量元素时挂起选择全部

@albert 为此，您还可以为全选设置一个复选框，在该复选框上禁用选择并以逗号分隔获取隐藏字段中的所有值。

@Parth 您能否为此实现提供一个有效的 jsfiddle。 ?

@albert 我添加了示例代码。你可以试试这个。