【问题标题】:JQuery Select2 - How to select all optionsJQuery Select2 - 如何选择所有选项
【发布时间】:2013-05-08 10:50:43
【问题描述】:

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

【问题讨论】:

    标签: jquery jquery-select2


    【解决方案1】:

    使用选择 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">
    

    你需要代码如DEMO2中所示的简单选择

    $("#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">
    

    【讨论】:

    • 就像一个魅力。我只会过滤掉没有值的选项,否则你会得到空白选项。 $("#e1 &gt; option").filter(function() { return $(this).val().length; });
    • 如果我删除了一些选项,选择框仍然被选中,如果我更改了一些选项,如何让他们选择。
    • DEOMO1:如何修改它以使其在执行搜索功能后仅选择选项?例如,您搜索带有 Alabama 和 Amalapuram 的“ala”,然后我想全选以仅选择这 2 个?
    【解决方案2】:

    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();
    

    【讨论】:

    • 为 select2 加载和卸载选项的超级简单方法。谢谢
    • 非常整洁干净的方法。
    【解决方案3】:

    github上有thread中的描述。引用 (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", "");
            }
        }
    });
    

    【讨论】:

    • @kkudi 在 github 上询问作者
    • 我想问作者什么?上面的代码对我根本不起作用。不知道为什么。我也完成了代码的调试。我的数据是通过 ajax 加载的,但不确定是否有任何区别。
    • 我不确定这是我要问的行为。我想要的是一旦你输入“be”,就会出现一个“bed”、“bee”、“bent”、“bell”的列表,并且你想从列表中选择所有元素。
    • @kkudi 您仍然可以使用 Select All 复选框来执行此操作,但正如 Garath 所说,您必须在其背后编写自己的逻辑。当用户键入“be”并单击“全选”时,标记所有以“be”开头的选定值。
    • 请注意,当结果由 ajax 加载时,此代码不起作用。
    【解决方案4】:

    你可以为一个字符串做到这一点

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

    【讨论】:

    • 非常短的选择!
    • 虽然这最初似乎可以工作,但插件似乎不能很好地使用它,并且最终不会选择手动取消选择的内容。
    【解决方案5】:

    $(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

    如果选项是在 AJAX 请求之后创建的,那么这些选项将不起作用。因此,在触发更改之后,我们将它们映射到 find 并选择/取消选择它们。

    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');
          }
      });
    });
    

    只需使用查找。

    【讨论】:

      【解决方案6】:

      $(document).ready(function() {
          $("#my-select").select2();
      });
      
      function selectAll() {
          $("#my-select > option").prop("selected", true);
          $("#my-select").trigger("change");
      }
      
      function deselectAll() {
          $("#my-select > option").prop("selected", false);
          $("#my-select").trigger("change");
      }
      .button-container {
        margin-bottom: 10px;
      }
      
      #my-select {
        width: 200px;
      }
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
      <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>
      
      <div class="button-container">
        <button type="button" onclick="selectAll()">Select All</button>
        <button type="button" onclick="deselectAll()">Deselect All</button>
      </div>
      <select id="my-select" multiple>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="grape">Grape</option>
        <option value="pineapple">Pineapple</option>
      </select>

      这是最简单的方法

      function selectAll() {
        $("#my-select > option").prop("selected", true);
        $("#my-select").trigger("change"); 
      }
      

      【讨论】:

        【解决方案7】:

        $('.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 item = $(that.parents("span[class*='select2-container']").siblings('select[multiple]'));
        
          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);
          item.trigger('change');
        }
        .select2-container {
          width: 90% !important;
        }
        
        .select2-container .select-all {
                position: absolute;
                top: 6px;
                right: 4px;
                width: 20px;
                height: 20px;
                margin: auto;
                display: block;
                background: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNDc0LjggNDc0LjgwMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc0LjggNDc0LjgwMTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zOTYuMjgzLDI1Ny4wOTdjLTEuMTQtMC41NzUtMi4yODItMC44NjItMy40MzMtMC44NjJjLTIuNDc4LDAtNC42NjEsMC45NTEtNi41NjMsMi44NTdsLTE4LjI3NCwxOC4yNzEgICAgYy0xLjcwOCwxLjcxNS0yLjU2NiwzLjgwNi0yLjU2Niw2LjI4M3Y3Mi41MTNjMCwxMi41NjUtNC40NjMsMjMuMzE0LTEzLjQxNSwzMi4yNjRjLTguOTQ1LDguOTQ1LTE5LjcwMSwxMy40MTgtMzIuMjY0LDEzLjQxOCAgICBIODIuMjI2Yy0xMi41NjQsMC0yMy4zMTktNC40NzMtMzIuMjY0LTEzLjQxOGMtOC45NDctOC45NDktMTMuNDE4LTE5LjY5OC0xMy40MTgtMzIuMjY0VjExOC42MjIgICAgYzAtMTIuNTYyLDQuNDcxLTIzLjMxNiwxMy40MTgtMzIuMjY0YzguOTQ1LTguOTQ2LDE5LjctMTMuNDE4LDMyLjI2NC0xMy40MThIMzE5Ljc3YzQuMTg4LDAsOC40NywwLjU3MSwxMi44NDcsMS43MTQgICAgYzEuMTQzLDAuMzc4LDEuOTk5LDAuNTcxLDIuNTYzLDAuNTcxYzIuNDc4LDAsNC42NjgtMC45NDksNi41Ny0yLjg1MmwxMy45OS0xMy45OWMyLjI4Mi0yLjI4MSwzLjE0Mi01LjA0MywyLjU2Ni04LjI3NiAgICBjLTAuNTcxLTMuMDQ2LTIuMjg2LTUuMjM2LTUuMTQxLTYuNTY3Yy0xMC4yNzItNC43NTItMjEuNDEyLTcuMTM5LTMzLjQwMy03LjEzOUg4Mi4yMjZjLTIyLjY1LDAtNDIuMDE4LDguMDQyLTU4LjEwMiwyNC4xMjYgICAgQzguMDQyLDc2LjYxMywwLDk1Ljk3OCwwLDExOC42Mjl2MjM3LjU0M2MwLDIyLjY0Nyw4LjA0Miw0Mi4wMTQsMjQuMTI1LDU4LjA5OGMxNi4wODQsMTYuMDg4LDM1LjQ1MiwyNC4xMyw1OC4xMDIsMjQuMTNoMjM3LjU0MSAgICBjMjIuNjQ3LDAsNDIuMDE3LTguMDQyLDU4LjEwMS0yNC4xM2MxNi4wODUtMTYuMDg0LDI0LjEzNC0zNS40NSwyNC4xMzQtNTguMDk4di05MC43OTcgICAgQzQwMi4wMDEsMjYxLjM4MSw0MDAuMDg4LDI1OC42MjMsMzk2LjI4MywyNTcuMDk3eiIgZmlsbD0iIzAwMDAwMCIvPgoJCTxwYXRoIGQ9Ik00NjcuOTUsOTMuMjE2bC0zMS40MDktMzEuNDA5Yy00LjU2OC00LjU2Ny05Ljk5Ni02Ljg1MS0xNi4yNzktNi44NTFjLTYuMjc1LDAtMTEuNzA3LDIuMjg0LTE2LjI3MSw2Ljg1MSAgICBMMjE5LjI2NSwyNDYuNTMybC03NS4wODQtNzUuMDg5Yy00LjU2OS00LjU3LTkuOTk1LTYuODUxLTE2LjI3NC02Ljg1MWMtNi4yOCwwLTExLjcwNCwyLjI4MS0xNi4yNzQsNi44NTFsLTMxLjQwNSwzMS40MDUgICAgYy00LjU2OCw0LjU2OC02Ljg1NCw5Ljk5NC02Ljg1NCwxNi4yNzdjMCw2LjI4LDIuMjg2LDExLjcwNCw2Ljg1NCwxNi4yNzRsMTIyLjc2NywxMjIuNzY3YzQuNTY5LDQuNTcxLDkuOTk1LDYuODUxLDE2LjI3NCw2Ljg1MSAgICBjNi4yNzksMCwxMS43MDQtMi4yNzksMTYuMjc0LTYuODUxbDIzMi40MDQtMjMyLjQwM2M0LjU2NS00LjU2Nyw2Ljg1NC05Ljk5NCw2Ljg1NC0xNi4yNzRTNDcyLjUxOCw5Ny43ODMsNDY3Ljk1LDkzLjIxNnoiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K') no-repeat center;
                background-size: contain;
                cursor: pointer;
                z-index: 999999;
            }
        <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>

        【讨论】:

          【解决方案8】:

          信息:gSiteID 的值是最初动态创建选择选项时使用的值。 #selAllSites 是复选框的 ID,#siteID 是您要操作的选择列表的 ID。

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

          【讨论】:

          • 这是我为此找到的最佳答案,其他答案让您处于可能会出现故障的状态。
          • 请。其他一切都可能破坏 select2 本身。您可以选择从元素本身获取值,即: var values = $.map($select2.find('option') ,function(option) { return option.value; });
          【解决方案9】:

          @Garath:我已经调整了您发布的代码,以使其适用于通过 ajax 加载的结果。感谢您在这里提出这个问题。

              $(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", []);
                  }
              }
          });
          

          【讨论】:

          • @Jim 有没有鼠标点击全选?
          【解决方案10】:

          这对 AJAX 非常有效,可以防止在 FF (Ctrl-D) 中打开书签窗口,并且在 closeOnSelect 设置为关闭时也可以正常工作。

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

          【讨论】:

            【解决方案11】:
            $.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" style="width: 100%; height: 3rem; text-align: left; color: blue; background: none; border: none; box-shadow: none">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-id").select2({
                    placeholder: "Select weekdays...",
                    allowClear: true,
                    dropdownAdapter: Utils.Decorate(
                        Utils.Decorate(
                            Dropdown,
                            AttachBody
                        ),
                        SelectAll
                    )
                });
            });
            

            源码:http://jsbin.com/seqonozasu/1/edit?html,js,output

            【讨论】:

            • 如果您手动选择列表中的 2 个项目,然后“全选”,它将选择除您最初选择的 2 个项目之外的所有项目。
            【解决方案12】:

            看看我创建的这个 jsFiddle,确定这就是你搜索的所有答案

            Select2 Multiple dropdown with select all property

            $(".checkbox").click(function(){
                if($(".checkbox").is(':checked') ){
                    $(this).parent().find('option').prop("selected","selected");
                    $(this).parent().find('option').trigger("change");
                    $(this).parent().find('option').click();
                    
                }else{
                   $(this).parent().find('option').removeAttr("selected","selected");
                   $(this).parent().find('option').trigger("change");
                 }
            });
            
            $("#button").click(function(){
                   alert($("select").val());
            });
            
            $(document).ready(function() {
                		  $('.select2').select2({
                			    closeOnSelect: false,
                			    allowClear:false
                		  });
                	  	});
            <div>
            <select multiple size=2 class="select2">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="opel">Opel</option>
              <option value="audi">Audi</option>
            </select> <input type="checkbox" class="checkbox" >Select All
            </div>
            
            <div>
            <select multiple size=2 class="select2">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="opel">Opel</option>
              <option value="audi">Audi</option>
            </select> <input type="checkbox" class="checkbox" >Select All
            </div>

            【讨论】:

              【解决方案13】:

              select2中全选的自定义实现DEMO

              function RunSelect2(){
                $('#select-id').select2({
                   allowClear: true,
                   closeOnSelect: false,
                }).on('select2:open', function() {  
              
                  setTimeout(function() {
                      $(".select2-results__option .select2-results__group").bind( "click", selectAlllickHandler ); 
                  }, 0);
              
                });
              }
              
              RunSelect2();
              
              
              var selectAlllickHandler = function() {
              	$(".select2-results__option .select2-results__group").unbind( "click", selectAlllickHandler );        
                $('#select-id').select2('destroy').find('option').prop('selected', 'selected').end();
                RunSelect2();
              };
              .select2-results__group
              {
                cursor:pointer !important;
              }
              <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
              
              <select multiple id='select-id' style="width:300px">
                  <optgroup label="select all">
                    <option value='1'>1 one</option>
                    <option value='2'>2 two</option>
                    <option value='3'>3 three</option>
                    <option value='4'>4 four</option>
                    <option value='5'>5 five</option>
                    <option value='6'>6 six</option>
                  </optgroup>
              </select>

              【讨论】:

                【解决方案14】:

                如果您需要一个复选框来执行此操作,只需简单地执行此操作即可。

                <select id="myselect" multiple="multiple">
                  <option value="level1">Level 1</option>
                  <option value="level2">Level 2</option>
                  <option value="level3">Level 3</option>
                  <option value="level4">Level 4</option>
                </select>
                
                <br/>
                Select/Deselect <input type="checkbox" id="selectall"/>
                

                jquery函数:

                $("#selectall").on('click',function(){
                    var checked = $("#selectall").prop("checked");
                  if(checked==true){
                    $("#myselect > option").prop("selected",true);
                  }else{
                    $("#myselect > option").prop("selected",false);
                  }
                });
                

                【讨论】:

                  【解决方案15】:

                  2019 年更新

                  要以编程方式为 Select2 控件选择选项/项目,请使用 jQuery .val() 方法。

                  您还可以将数组传递给val 进行多项选择:

                  $('#mySelect2').val(['1', '2']);
                  $('#mySelect2').trigger('change');
                  

                  https://select2.org/programmatic-control/add-select-clear-items#selecting-options

                  【讨论】:

                    【解决方案16】:

                    改变

                    $result.data('data');
                    

                    Utils.GetData($result.get(0),'data')
                    

                    【讨论】:

                    • 虽然此代码可能会回答问题,但提供有关 why 和/或 如何 此代码回答问题的附加上下文可提高其长期价值.
                    【解决方案17】:

                    这行代码会选择所有选项

                    $('select.select-all-class-name').attr('selected', true).parent().trigger('change');
                    

                    添加选择事件以适用于所有场景。当您选择和取消选择一个选项然后单击 selectAll 时,上述行在场景中失败。最后一个取消选择的选项将不会被选中。为了解决这个问题,添加下面的代码行。

                    //Select options selected true for the selected option
                    $('#mySelect2').on('select2:selecting', function (e) {
                        $('select#mySelect2ID > option[value="'+e.params.args.data.id+'"]').attr('selected', true);
                    });
                    
                    //DeSelect options selected to false for the option deselected
                    $('#mySelect2').on('select2:unselecting', function (e) {
                        $('select#mySelect2ID > option[value="'+e.params.args.data.id+'"]').attr('selected', false);
                    });
                    

                    【讨论】:

                      【解决方案18】:

                      请看下面的代码。

                      $('.select2').select2({
                          formatResult:function(object, container, query){
                              if(object.id=='all' || object.id=='clear')
                                  return '<span style="color:#31708F;font-size:10px;"><i class="fa fa-chevron-right"></i> '+object.text+'</span>';
                      
                              return object.text;
                          }
                      });
                      $('.select2').on("change", function(e) {
                          if($.inArray('all', e.val)===0){
                              var selected = [];
                              $(this).find("option").each(function(i,e){
                                  if($(e).attr("value")=='all' || $(e).attr("value")=='clear')
                                      return true;
                      
                                  selected[selected.length]=$(e).attr("value");
                              });
                              $(this).select2('val',selected);
                          }else if($.inArray('clear', e.val)===0){
                              $(this).select2('val','');
                          }
                      });
                      

                      参考来自:https://github.com/select2/select2/issues/195#issuecomment-52163095

                      【讨论】:

                        猜你喜欢
                        • 1970-01-01
                        • 1970-01-01
                        • 2019-04-19
                        • 1970-01-01
                        • 1970-01-01
                        • 2023-04-02
                        • 1970-01-01
                        • 1970-01-01
                        • 2018-11-09
                        相关资源
                        最近更新 更多