首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >JQuery Select2 -如何选择所有选项

JQuery Select2 -如何选择所有选项
EN

Stack Overflow用户
提问于 2013-05-14 08:29:48
回答 18查看 115.1K关注 0票数 50

我使用的是jQuery select2多选下拉菜单。我需要从代码中选择下拉列表中的所有选项。基本上有一个Select All复选框来实现这个功能,我想从这个复选框中选择/取消选择选项。

EN

回答 18

Stack Overflow用户

回答已采纳

发布于 2013-05-14 08:36:37

在github的线程中有一个描述。Quoting (https://github.com/ivaynberg/select2/issues/195#issuecomment-13489140 by MortadaAK),允许您选择ctrl+a上的所有内容

代码语言:javascript
运行
AI代码解释
复制
$(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", "");
        }
    }
});
票数 19
EN

Stack Overflow用户

发布于 2013-05-14 12:48:18

使用Select 2

代码语言:javascript
运行
AI代码解释
复制
$("#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">

对于简单选择,您需要如中所示的代码

代码语言:javascript
运行
AI代码解释
复制
$("#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">
票数 68
EN

Stack Overflow用户

发布于 2018-03-05 04:26:29

来自here的答案工作得很好。

代码语言:javascript
运行
AI代码解释
复制
// 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();
票数 26
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16538399

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文