JQuery Select2 - Cách chọn tất cả các tùy chọn

Question

Tôi đang sử dụng trình đơn thả xuống đa lựa chọn jQuery select2. Tôi cần phải chọn tất cả các tùy chọn trong một trình đơn thả xuống từ mã. Về cơ bản có một hộp kiểm Chọn Tất cả mà chức năng này phải được triển khai, tôi muốn chọn/bỏ chọn các tùy chọn từ hộp kiểm này.

Answer 1

Có mô tả trong chuỗi trên github. Trích dẫn (https://github.com/ivaynberg/select2/issues/195#issuecomment-13489140 bởi MortadaAK) cho phép bạn chọn tất cả mọi thứ trên ctrl + a

$(document).on("keypress",".select2-input",function(event){ 
    if (event.ctrlKey || event.metaKey) { 
     var id =$(this).parents("div[class*='select2-container']").attr("id").replace("s2id_",""); 
     var element =$("#"+id); 
     if (event.which == 97){ 
      var selected = []; 
      element.find("option").each(function(i,e){ 
       selected[selected.length]=$(e).attr("value"); 
      }); 
      element.select2("val", selected); 
     } else if (event.which == 100){ 
      element.select2("val", ""); 
     } 
    } 
}); 

Answer 2

sử dụng Chọn 2 DEMO

$("#e1").select2(); 
$("#checkbox").click(function(){ 
    if($("#checkbox").is(':checked')){ 
     $("#e1 > option").prop("selected","selected");// Select All Options 
     $("#e1").trigger("change");// Trigger change to select 2 
    }else{ 
     $("#e1 > option").removeAttr("selected"); 
     $("#e1").trigger("change");// Trigger change to select 2 
    } 
}); 

$("#button").click(function(){ 
     alert($("#e1").val()); 
}); 
<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> 
<input type="checkbox" id="checkbox" >Select All 

<input type="button" id="button" value="check Selected"> 

Bạn cần mã Như đã trình bày trong DEMO2 cho Simple Chọn

$("#checkbox").click(function(){ 
    if($("#checkbox").is(':checked')){ 
     $("select > option").prop("selected","selected"); 
    }else{ 
     $("select > option").removeAttr("selected"); 
    } 
}); 

$("#button").click(function(){ 
     alert($("select").val()); 
}); 

<select multiple size=2> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="opel">Opel</option> 
    <option value="audi">Audi</option> 
</select> <input type="checkbox" id="checkbox" >Select All 

<input type="button" id="button" value="check Selected"> 

Answer 3

@Garath: Tôi đã chỉnh sửa mã đã đăng của bạn để làm cho nó hoạt động với kết quả được tải qua ajax. Cảm ơn bạn đã đưa nó lên đây.

$(document).on("keypress",".select2-input",function(event){ 
    if (event.ctrlKey || event.metaKey) { 
     var id =$(this).parents("div[class*='select2-container']").attr("id").replace("s2id_",""); 
     var element =$("#"+id); 
     if (event.which == 97){ 
      var selected = []; 
      $('.select2-drop-active').find("ul.select2-results li").each(function(i,e){ 
       selected.push($(e).data("select2-data")); 
      }); 
      element.select2("data", selected); 
     } else if (event.which == 100){ 
      element.select2("data", []); 
     } 
    } 
}); 

Answer 4

Thông tin: Giá trị cho gSiteID là giá trị được sử dụng khi tạo động tùy chọn chọn. #selAllSites là id của một hộp kiểm và #siteID là id của danh sách lựa chọn mà bạn muốn thao tác.

var gSiteIDs = "8475, 9082, 2387, 1234"; 

function selectAllSites() 
{ 
    if($("#selAllSites").is(":Checked")) { 
     $("#siteID").select2("val", [gSiteIDs]);         
    } else { 
     $("#siteID").select2("val", []);         
    } 
}   

Answer 5

Điều này làm việc tuyệt vời với AJAX, ngăn không cho mở cửa sổ Dấu trang trong FF (Ctrl-D) và hoạt động tốt khi closeOnSelect được đặt thành tắt.

$(document).on("keypress",".select2-input",function(event){ 
    if (event.ctrlKey || event.metaKey) { 
     var id =$(this).parents("div[class*='select2-container']").attr("id").replace("s2id_",""); 
     var element =$("#"+id); 

     if (event.which == 97){ 
      var selected = []; 
      $('.select2-drop-active').find("ul.select2-results li").each(function(i,e){ 
       selected.push($(e).data("select2-data")); 
      }); 
      element.select2("data", selected); 
      element.select2("focus"); 
      event.preventDefault(); 
     } else if (event.which == 100){ 
      element.select2("data", []); 
      event.preventDefault(); 
     } 
    } 
}); 

Answer 6

bạn có thể làm điều đó cho một chuỗi

$('select.your-select option').attr('selected', true).parent().trigger('change') 

Answer 7

$(document).ready(function() { 
 
    $("#checkbox").click(function(){ 
 
     if($("#checkbox").is(':checked')){ //select all 
 
     $("#e1").find('option').prop("selected",true); 
 
     $("#e1").trigger('change'); 
 
     } else { //deselect all 
 
     $("#e1").find('option').prop("selected",false); 
 
     $("#e1").trigger('change'); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select multiple id="e1" style="width:300px"> 
 
     <option value="AL">Alabama</option>  //AJAX created 
 
     <option value="Am">Amalapuram</option> //AJAX created 
 
     <option value="An">Anakapalli</option> //AJAX created 
 
     <option value="Ak">Akkayapalem</option> //AJAX created 
 
     <option value="WY">Wyoming</option>  //AJAX created 
 
    </select> 
 
    <input type="checkbox" id="checkbox" >Select All

Nếu tùy chọn được tạo ra sau khi yêu cầu AJAX sau đó các tùy chọn này không có tác dụng. Vì vậy, chúng tôi ánh xạ chúng với tìm và chọn/bỏ chọn chúng, sau khi thay đổi kích hoạt đó.

HTML

<select multiple id="e1" style="width:300px"> 
     <option value="AL">Alabama</option>  //AJAX created 
     <option value="Am">Amalapuram</option> //AJAX created 
     <option value="An">Anakapalli</option> //AJAX created 
     <option value="Ak">Akkayapalem</option> //AJAX created 
     <option value="WY">Wyoming</option>  //AJAX created 
    </select> 
    <input type="checkbox" id="checkbox" >Select All 

JS

$(document).ready(function() { 
    $("#checkbox").click(function(){ 
     if($("#checkbox").is(':checked')){ //select all 
     $("#e1").find('option').prop("selected",true); 
     $("#e1").trigger('change'); 
     } else { //deselect all 
     $("#e1").find('option').prop("selected",false); 
     $("#e1").trigger('change'); 
     } 
    }); 
}); 

chỉ cần sử dụng tìm.

Answer 8

$('.select2').select2({ 
 
    placeholder: 'Press CTRL+A for selecr or unselect all options' 
 
}); 
 

 
$('.select2[multiple]').siblings('.select2-container').append('<span class="select-all"></span>'); 
 

 
$(document).on('click', '.select-all', function (e) { 
 
    selectAllSelect2($(this).siblings('.selection').find('.select2-search__field')); 
 
}); 
 

 
$(document).on("keyup", ".select2-search__field", function (e) { 
 
    var eventObj = window.event ? event : e; 
 
    if (eventObj.keyCode === 65 && eventObj.ctrlKey) 
 
    selectAllSelect2($(this)); 
 
}); 
 
     
 
     
 
function selectAllSelect2(that) { 
 

 
    var selectAll = true; 
 
    var existUnselected = false; 
 
    var id = that.parents("span[class*='select2-container']").siblings('select[multiple]').attr('id'); 
 
    var item = $("#" + id); 
 

 
    item.find("option").each(function (k, v) { 
 
     if (!$(v).prop('selected')) { 
 
      existUnselected = true; 
 
      return false; 
 
     } 
 
    }); 
 

 
    selectAll = existUnselected ? selectAll : !selectAll; 
 

 
    item.find("option").prop('selected', selectAll).trigger('change'); 
 
}

.select2-container { 
 
    width: 90% !important; 
 
} 
 

 
.select2-container .select-all { 
 
\t \t position: absolute; 
 
\t \t top: 6px; 
 
\t \t right: 4px; 
 
\t \t width: 20px; 
 
\t \t height: 20px; 
 
\t \t margin: auto; 
 
\t \t display: block; 
 
\t \t background: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNDc0LjggNDc0LjgwMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc0LjggNDc0LjgwMTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zOTYuMjgzLDI1Ny4wOTdjLTEuMTQtMC41NzUtMi4yODItMC44NjItMy40MzMtMC44NjJjLTIuNDc4LDAtNC42NjEsMC45NTEtNi41NjMsMi44NTdsLTE4LjI3NCwxOC4yNzEgICAgYy0xLjcwOCwxLjcxNS0yLjU2NiwzLjgwNi0yLjU2Niw2LjI4M3Y3Mi41MTNjMCwxMi41NjUtNC40NjMsMjMuMzE0LTEzLjQxNSwzMi4yNjRjLTguOTQ1LDguOTQ1LTE5LjcwMSwxMy40MTgtMzIuMjY0LDEzLjQxOCAgICBIODIuMjI2Yy0xMi41NjQsMC0yMy4zMTktNC40NzMtMzIuMjY0LTEzLjQxOGMtOC45NDctOC45NDktMTMuNDE4LTE5LjY5OC0xMy40MTgtMzIuMjY0VjExOC42MjIgICAgYzAtMTIuNTYyLDQuNDcxLTIzLjMxNiwxMy40MTgtMzIuMjY0YzguOTQ1LTguOTQ2LDE5LjctMTMuNDE4LDMyLjI2NC0xMy40MThIMzE5Ljc3YzQuMTg4LDAsOC40NywwLjU3MSwxMi44NDcsMS43MTQgICAgYzEuMTQzLDAuMzc4LDEuOTk5LDAuNTcxLDIuNTYzLDAuNTcxYzIuNDc4LDAsNC42NjgtMC45NDksNi41Ny0yLjg1MmwxMy45OS0xMy45OWMyLjI4Mi0yLjI4MSwzLjE0Mi01LjA0MywyLjU2Ni04LjI3NiAgICBjLTAuNTcxLTMuMDQ2LTIuMjg2LTUuMjM2LTUuMTQxLTYuNTY3Yy0xMC4yNzItNC43NTItMjEuNDEyLTcuMTM5LTMzLjQwMy03LjEzOUg4Mi4yMjZjLTIyLjY1LDAtNDIuMDE4LDguMDQyLTU4LjEwMiwyNC4xMjYgICAgQzguMDQyLDc2LjYxMywwLDk1Ljk3OCwwLDExOC42Mjl2MjM3LjU0M2MwLDIyLjY0Nyw4LjA0Miw0Mi4wMTQsMjQuMTI1LDU4LjA5OGMxNi4wODQsMTYuMDg4LDM1LjQ1MiwyNC4xMyw1OC4xMDIsMjQuMTNoMjM3LjU0MSAgICBjMjIuNjQ3LDAsNDIuMDE3LTguMDQyLDU4LjEwMS0yNC4xM2MxNi4wODUtMTYuMDg0LDI0LjEzNC0zNS40NSwyNC4xMzQtNTguMDk4di05MC43OTcgICAgQzQwMi4wMDEsMjYxLjM4MSw0MDAuMDg4LDI1OC42MjMsMzk2LjI4MywyNTcuMDk3eiIgZmlsbD0iIzAwMDAwMCIvPgoJCTxwYXRoIGQ9Ik00NjcuOTUsOTMuMjE2bC0zMS40MDktMzEuNDA5Yy00LjU2OC00LjU2Ny05Ljk5Ni02Ljg1MS0xNi4yNzktNi44NTFjLTYuMjc1LDAtMTEuNzA3LDIuMjg0LTE2LjI3MSw2Ljg1MSAgICBMMjE5LjI2NSwyNDYuNTMybC03NS4wODQtNzUuMDg5Yy00LjU2OS00LjU3LTkuOTk1LTYuODUxLTE2LjI3NC02Ljg1MWMtNi4yOCwwLTExLjcwNCwyLjI4MS0xNi4yNzQsNi44NTFsLTMxLjQwNSwzMS40MDUgICAgYy00LjU2OCw0LjU2OC02Ljg1NCw5Ljk5NC02Ljg1NCwxNi4yNzdjMCw2LjI4LDIuMjg2LDExLjcwNCw2Ljg1NCwxNi4yNzRsMTIyLjc2NywxMjIuNzY3YzQuNTY5LDQuNTcxLDkuOTk1LDYuODUxLDE2LjI3NCw2Ljg1MSAgICBjNi4yNzksMCwxMS43MDQtMi4yNzksMTYuMjc0LTYuODUxbDIzMi40MDQtMjMyLjQwM2M0LjU2NS00LjU2Nyw2Ljg1NC05Ljk5NCw2Ljg1NC0xNi4yNzRTNDcyLjUxOCw5Ny43ODMsNDY3Ljk1LDkzLjIxNnoiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K') no-repeat center; 
 
\t \t background-size: contain; 
 
\t \t cursor: pointer; 
 
\t \t z-index: 999999; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> 
 

 
<select class="select2" multiple id="my-select"> 
 
<option value="1">Option 1</option> 
 
<option value="2">Option 2</option> 
 
<option value="3">Option 3</option> 
 
<option value="4">Option 4</option> 
 
</select>

Answer 9

trả lời từ here công trình khá tốt.

// Select all 
$('#select-id').select2('destroy').find('option').prop('selected', 'selected').end().select2(); 

// Unselect all 
$('#select-id').select2('destroy').find('option').prop('selected', false).end().select2();