ajax検索で設定されたselect2 jqueryプラグインですべての機能を選択する方法

Question

Iamは現在、select2 jqueryプラグインを使用して、ajax呼び出しから動的に取り込まれたリストからデータを選択します。私はselect all機能を実装する必要があります。これにより、ユーザーはselect allボタンを使って一度にすべてのオプションを選択することができます。私はこの例をjsfiddeで実装しようとしました。

Click here to see the jsfiddle

しかし、項目のより多くのリストを選択するための500 items.Itは、ブラウザがしばらくハングすると言います。パフォーマンスの問題なしにこれを実装するより良い方法を提案してください。

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

あなたが入力フィールドに= "隠された" タイプを設定することができます。