Question

我正在使用jQuery selectize插件构建表单。现在我正在尝试构建一个方法来选择选择框中的所有选项并显示他们被选中了。

这是我使用的代码：

$('#select_all').click(function() {

          $('#project_user_ids option').prop('selected', true);

          $('#project_user_ids').selectize();

        });

它可以选择所有选项，但它们不会显示在选择框中。我需要一种“刷新”选项并在框中显示所选选项的方法。

我该怎么做？

Answer 1

如果您想首先使用选择插件动态选择所有选项，您必须初始化插件并获取其实例。

使用setValue（）方法可以更改控件的值。例如： selectize.setValue(['value1', 'value2']);

使用setValue（）可以使用简单方法从下划线或lodash设置所有值。 selectize.setValue(_.keys(selectize.options));

完整代码应如下所示：

var $projectUserIds = $('#project_user_ids').selectize(); // Selectize plugin initialization
var selectize = $projectUserIds[0].selectize; // Get selectize instance

$('#select_all').click(function() {
    selectize.setValue(_.keys(selectize.options)); // Set all selectize options using setValue() method
});

Answer 2

我发现编写一个可以在任何地方重复使用的插件更为简单。我没有覆盖现有的 Ctrl + A 功能，而是使用 Ctrl + Shift + < kbd> A 。这是一个示例：

// plugin to set/unset all items on pressing Ctrl-Shift-A
Selectize.define('set_all', function(options) {
  var self = this;

    self.onKeyUp = (function(e) {
      var original = self.onKeyUp;

      return function(e) {
        // call original function - seems to work better calling this first
        original.apply(this, arguments);

        // keyboard event is in e.originalEvent; 'code' is the key code that was pressed
        var code = e.originalEvent.code;

        // do nothing if Ctrl-Shift-A was not selected
        if (!(e.ctrlKey == true && e.shiftKey == true && code == 'KeyA')) {
          return;
        }

        self.setValue(Object.keys(self.options));
        self.focus(); // optional - maintains focus in input
      };
    })();
});

用法：

$('#your-input').selectize({plugins: ['set_all']});

self.focus()调用是可选的，但它确实将焦点集中在input字段上，并且往往更加直观。

您也可以将其替换为self.focus()，而不是self.selectAll()，以便在添加所有项目后立即选择所有项目。如果您希望用户能够立即按 Backspace 并删除所有项目，以防他们在添加项目时出错了，这可能会很有用。

您甚至可以进一步扩展插件，并提供设置和未设置的功能。例如，对上述插件的修改使用 Ctrl + Shift + A 来设置所有项目，并使用 Ctrl + Shift + S 取消设置所有项目：

// plugin to set/unset all items on pressing Ctrl-Shift-A / Ctrl-Shift-S
Selectize.define('set_all', function(options) {
  var self = this;

    self.onKeyUp = (function(e) {
      var original = self.onKeyUp;

      return function(e) {
        // call original function - seems to work better calling this FIRST
        original.apply(this, arguments);

        // keyboard event is in e.originalEvent; 'code' is the key code that was pressed
        var code = e.originalEvent.code;

        // do nothing if Ctrl-Shift-A/S was not selected
        if (!(e.ctrlKey == true && e.shiftKey == true && (code == 'KeyA' || code == 'KeyS'))) {
          return;
        }

        // if 'A' was pressed set and select all items; if 'S' was pressed unset all items
        if (code == 'KeyA') {
          self.setValue(Object.keys(self.options));
          self.focus();
        } else {
          self.clear();
        }
      };
    })();
});

请注意，我还调用了原始的onKeyUp函数，因此其过滤功能仍可以按预期运行。由于某种原因，最好将 prior 称为我的修改。如果我将setValue()/clear()调用放在return语句的位置，则select / deselect似乎只能工作一次。

Answer 3

我最近使用了这个：

Selectize.prototype.selectall = function(){
    var self = this;
    self.setValue(Object.keys(self.options));
    self.focus();
};

然后在链接中使用它：

<a href="javascript:document.getElementById('column-select').selectize.selectall();">
    Select All
</a>

Answer 4

使用Jason代码，我更改了一些部分以选择所有列出的元素（当前结果）

idea.exe.vmoptions

Answer 5

作为＆＃34;全选＆＃34;的解决方法;功能，你可以使用ctrl+a的js函数。

我创建了这个函数，它将所有可用选项添加到活动项目数组中：

$('#my-select').keyup(function(e) {
    if (e.ctrlKey == true) {
      if (e.keyCode == 65 || e.keyCode == 97){
        var el = el=$('#my-select')[0].selectize;
        var optKeys = Object.keys(el.options);
        optKeys.forEach(function (key, index) {
          el.addItem(key);
        });
      }
    }
  });

Answer 6

尝试此功能

     function selc2SelectAll(element){
        el =  element[0].selectize;
              optKeys = Object.keys(el.options);
              optKeys.forEach(function (key, index) {
              el.addItem(key);
        });
    }

    selectZ = $('#report_emails').selectize();
    selc2SelectAll(selectZ);

Answer 7

这就是我在下拉菜单中添加select all选项的方法

var selc2SelectAll = function(element) {
    var el = element[ 0 ].selectize;
    var optionKeys = Object.keys(el.options).filter(key => key !== 'all');
    el.setValue(optionKeys);
  };


  $('#report_emails').change(function() {
     selectZ = $('#report_emails').selectize();
     selc2SelectAll(selectZ);
  });

如何使用Selectize选择所有选项？

7 个答案: