Question

点击“全选”后，我试图停止关闭我的select2下拉菜单。复选框。阅读帖子后，我看到我可以逃避强迫 .select2（＆＃39;开＆＃39）; 但这是一个黑客，视觉上很差。

在帖子之后，我也尝试过使用＆＃39;全选＆＃39;中的stopPropagation（）点击事件但似乎被忽略了（否则我没有正确使用它）。我还没有看到在选择所有选项后下拉列表保持打开的情况下的帖子中的示例。

任何想法？

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></script>


<body class='bodyClass'>

  <div class="CountryDropContainer">

    <div id="Container_selectAll">
      <label id='#Outer_selectAll'>
  <input id="selectAll" type='checkbox'>
  <span></span>
  All
</label>
    </div>

    <select id="CountryBoxesContainerID_prodn" name="CountryBoxesContainerID_prodn" class="form-control select2-multiple" multiple="multiple">

<option class="myEuropeCountries" value="UN208a" title="Denmark" >Denmark</option>
<option class="myEuropeCountries" value="UN233a" title="Estonia" >Estonia</option>
<option class="myEuropeCountries" value="UN246a" title="Finland" >Finland</option>
<option class="myEuropeCountries" value="UN348a" title="Hungary" >Hungary</option>
<option class="myEuropeCountries" value="UN352a" title="Iceland" >Iceland</option>

</select>
  </div>
</body>

$(function() {

  var S2MultiCheckboxes = function(options, element) {
    var self = this;
    self.options = options;
    self.$element = $(element);
    var values = self.$element.val();
    self.$element.removeAttr('multiple');
    self.select2 = self.$element.select2({

      allowClear: true, 
      placeholder: options.placeholder,
      closeOnSelect: false,

      templateSelection: function() {
        return self.options.templateSelection(self.$element.val() || [], $('option', self.$element).length);
      },
      templateResult: function(result) {
        if (result.loading !== undefined)
          return result.text;
        return $('<div>').text(result.text).addClass(self.options.wrapClass);
      }
    }).data('select2');
    self.select2.$results.off("mouseup").on("mouseup", ".select2-results__option[aria-selected]", (function(self) {
      return function(evt) {
        var $this = $(this);

        var data = $this.data('data');

        if ($this.attr('aria-selected') === 'true') {
          self.trigger('unselect', {
            originalEvent: evt,
            data: data
          });
          return;
        }

        self.trigger('select', {
          originalEvent: evt,
          data: data
        });
      }
    })(self.select2));
    self.$element.attr('multiple', 'multiple').val(values).trigger('change.select2');
  }

  // -----------------

  $.fn.extend({
    select2MultiCheckboxes: function() {
      var options = $.extend({
        wrapClass: 'wrap'
      }, arguments[0]);

      this.each(function() {
        new S2MultiCheckboxes(options, this);
      });
    }
  });


});



// ======================================

// Initialise dropdown
$(function() {

  //---------



  //---------


  $('#CountryBoxesContainerID_prodn').select2MultiCheckboxes({

    // placeholder: "",
    closeOnSelect: false,
    width: "auto",
    placeholder: '',
    escapeMarkup: function(markup) {
      return markup;
    },

    templateSelection: function(selected, total) {
      return ("Select Country" + ' ' + "") + selected.length + (" of ") + total + ("\xa0\xa0\xa0\xa0");
    },


  })


  //----------------------


  // When select2 is opened, show 'Select All' chkbx
  $('select').on('select2:open', function(e) {
    $('#Container_selectAll').css('display', 'block');
    $('#Container_selectAll').show();
  });


  // When select2 is closed
  $('select').on('select2:close', function(e) {
    //$('#Container_selectAll').hide();
  });



  // Detect click of an option 'ON'
  $("#selectAll").click(function() {

    if ($("#selectAll").is(':checked')) {

      $("#CountryBoxesContainerID_prodn > option").prop("selected", "selected");
      $("#CountryBoxesContainerID_prodn").trigger("change");
      //$('#CountryBoxesContainerID_prodn').select2('open');

    } else {
      $("#CountryBoxesContainerID_prodn > option").removeAttr("selected");
      $("#CountryBoxesContainerID_prodn").trigger("change");
      //$('#CountryBoxesContainerID_prodn').select2('open');
    }
  });


});

小提琴：https://jsfiddle.net/x4eexqnc/

Answer 1

你可以试试这个：

HTML：

<select multiple id="hihi">
       <option>1</option>
       <option>4</option>
       <option>3</option>
       <option>2</option>
 </select>

JS：

$('#hihi').select2({
    closeOnSelect: false
});

选中全部勾选后，从关闭下拉列表中停止选择2

1 个答案: