我正在使用 jQuery selectize 插件构建一个表单。 现在我正在尝试构建一种方法来选择选择框中的所有选项并显示 它们被选中。
这是我使用的代码：
$('#select_all').click(function() {
$('#project_user_ids option').prop('selected', true);
$('#project_user_ids').selectize();
});
它可以选择所有选项，但它们不会显示在选择框中。 我需要一种“刷新”选项并在框中显示所选选项的方法。
我该怎么做？
【问题讨论】：
标签： jquery selectize.js
如果您想首先使用 selectize 插件动态选择所有选项，您必须初始化插件并获取其实例。
使用 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
});
【讨论】：
Object.keys(selectize.options))而不是_.keys(selectize.options)
我最近用过这个：
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>
【讨论】：
我发现编写一个可以在任何地方重复使用的插件更简单。我没有覆盖现有的 Ctrl+A 功能，而是使用 Ctrl+Shift+一个。这是一个例子：
// 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 语句所在的位置，则选择/取消选择似乎只能工作一次。
【讨论】：
使用 Jason 代码我更改了一些部分以选择所有列出的元素（当前结果）
Selectize.define('set_all', function (options) {
let self = this;
self.onKeyUp = (function(e) {
const original = self.onKeyUp;
return function(e) {
original.apply(this, arguments);
const code = e.originalEvent.code;
if (!(e.ctrlKey == true && e.shiftKey == true && code == 'KeyA')) {
return;
}
let optionsSelected = {};
self.currentResults.items.forEach( (item) => {
optionsSelected[item.id] = self.options[item.id];
});
self.setValue(Object.keys(optionsSelected));
};
})();
});
【讨论】：
作为“全选”功能的解决方法，您可以为 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);
});
}
}
});
【讨论】：
试试这个功能
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);
【讨论】：
这就是我在下拉列表中添加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);
});
【讨论】：