ajax 검색으로 구성된 select2 jquery 플러그인으로 모든 기능을 선택하는 방법은 무엇입니까?

Question

Iam은 현재 select2 jquery plugin을 사용하여 ajax 호출에서 동적으로 채워진 목록에서 데이터를 선택합니다. 사용자가 모두 선택 버튼을 사용하여 한 번에 모든 옵션을 선택할 수 있도록 모든 기능을 선택하도록 구현해야합니다. 이 예제를 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()) 
    } 
}); 

.