选择下拉菜单中的所有元素

Question

所以我有一个下拉菜单。我已经成功地添加了一个清除按钮，但由于某种原因似乎无法让我的 select 全部正常工作。当我单击 select 按钮但没有任何反应时，看起来它正在读取控制台上的所有值。谁能帮我告诉我我做错了什么？我想我可能没有正确触发事件。我尝试过的任何方法似乎都不适合我。

代码如下：

$(document).ready(() => {
  $.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 = $("<a/>").addClass("btn btn-info").text("Select All");
        var $selectNone = $("<a/>").addClass("btn btn-info").text("None");

        $rendered.find(".select2-dropdown").prepend($selectNone);
        $rendered.find(".select2-dropdown").prepend($selectAll);

        $selectAll.on("click", function (e) {
          var $results = $rendered.find(
            ".select2-results__option[aria-selected=false]"
          );
          var data = $results.data("data", {
            selected: true,
            disabled: false,
            text: $results.html(),
            id: $results.html(),
            title: "",
            element: {},
          });
          self.$element.val(data);
          self.$element.trigger("select");
          self.trigger("close");
        });
        $selectNone.on("click", function (e) {
          // Trigger value changed with null value
          self.$element.val(null);
          self.$element.trigger("change");
          self.trigger("close");
        });
        return $rendered;
      };

      $(".custom-select2-widget").select2({
        closeOnSelect: false,
        allowClear: true,
        placeholder: "Select Option(s)...",
        dropdownAdapter: Utils.Decorate(
          Utils.Decorate(Dropdown, AttachBody),
          SelectAll
        ),
      });
    }
  );
});

Answer 1

我稍微改变了你的功能：

$selectAll.on("click", function (e) {

According to the documentation 如果您想 select 所有选项，您需要将数组传递给 val() 方法。因此，您更改的功能是：

$selectAll.on("click", function (e) {
    var $results = self.$element.find("option").map(function (idx, ele) {
         return ele.value;
    });

    self.$element.val($results);
    self.$element.trigger("change");
    self.trigger("close");
});

片段：

$.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 = $("<a/>").addClass("btn btn-info").text("Select All");
            var $selectNone = $("<a/>").addClass("btn btn-info").text("None");

            $rendered.find(".select2-dropdown").prepend($selectNone);
            $rendered.find(".select2-dropdown").prepend($selectAll);

            $selectAll.on("click", function (e) {
                var $results = self.$element.find("option").map(function (idx, ele) {
                    return ele.value;
                });

                self.$element.val($results);
                self.$element.trigger("change");
                self.trigger("close");
            });
            $selectNone.on("click", function (e) {
                // Trigger value changed with null value
                self.$element.val(null);
                self.$element.trigger("change");
                self.trigger("close");
            });
            return $rendered;
        };

        $(".custom-select2-widget").select2({
            closeOnSelect: false,
            allowClear: true,
            placeholder: "Select Option(s)...",
            dropdownAdapter: Utils.Decorate(
                    Utils.Decorate(Dropdown, AttachBody),
                    SelectAll
            ),
        });
    }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>


<select class="custom-select2-widget" name="states[]" multiple="multiple" style="width: 100%">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>

选择下拉菜单中的所有元素

Selecting all elements in a drop-down menu

javascript

jquery

jquery-select2