Как реализовать выбор всех функций с плагином jquery select2, настроенным с поиском ajax.?

В настоящее время я использую плагин select2 jquery для выбора данных из списка, динамически заполняемого вызовом ajax. Мне нужно реализовать выбор всех функций, чтобы пользователи могли выбирать все параметры одновременно, используя кнопку «Выбрать все». Я попытался реализовать это, следуя этому примеру в jsfidde.

Нажмите здесь, чтобы увидеть 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
  ),
  });
 });

javascript jquery jquery-select2-4 select2
person albert    schedule 10.04.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

это дублирующий вопрос JQuery Select2 - Как выбрать все параметры

где решение дано для множественного выбора с флажком.

если он загружается, вам следует добавить дополнительные скрытые поля, чтобы получить значение, разделенное запятыми.

попробуйте код ниже. 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" для поля ввода.

person Parth    schedule 10.04.2017
comment
Да, но он говорит, что все работает нормально, но это приводит к зависанию браузера, когда мы выбираем более ден 500 элементов. - person messi; 10.04.2017
comment
@Parth Нет, мне нужно убедиться, что браузер не зависает при выборе большого количества элементов с помощью выбора всех - person albert; 10.04.2017
comment
@albert для этого вы также можете поставить один флажок для выбора всех, при этом сделать выбор отключенным и получить все значения в скрытом поле через запятую. - person Parth; 10.04.2017
comment
@Parth Не могли бы вы предоставить рабочий jsfiddle для этой реализации. ? - person albert; 10.04.2017
comment
@albert я добавил пример кода. Вы можете попробовать это. - person Parth; 10.04.2017