我使用的是jQuery select2多选下拉菜单。我需要从代码中选择下拉列表中的所有选项。基本上有一个Select All复选框来实现这个功能,我想从这个复选框中选择/取消选择选项。
发布于 2013-05-14 08:36:37
在github的线程中有一个描述。Quoting (https://github.com/ivaynberg/select2/issues/195#issuecomment-13489140 by MortadaAK),允许您选择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", "");
}
}
});
发布于 2013-05-14 12:48:18
使用Select 2
$("#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">
对于简单选择,您需要如中所示的代码
$("#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">
发布于 2018-03-05 04:26:29
来自here的答案工作得很好。
// 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();
https://stackoverflow.com/questions/16538399
复制相似问题