标题几乎说明了一切。
我在页面上有几个选择框,所有选择框都是在ASP.NET Web表单中动态生成的,其中一些包含数百个选项。我希望能够输入搜索字符串,然后选择所有匹配的条目。
使用基本的select控件上的javascript进行全部选择并取消选择全部,然后调用很容易,$('#control-id').trigger('chosen:update');
但是在尝试仅选择与搜索过滤器匹配的选项时遇到问题。
对于“如何全选”选项,一个额外的按钮或一个按键,我对此并不挑剔。这是针对仅后端开发人员的页面,因此UI不必一定是100%直观的。
我最终通过更改所选插件并将以下代码添加到来解决了这个问题AbstractChosen.prototype.keyup_checker
:
case 65:
if (evt.ctrlKey && this.results_showing) {
if (typeof onSelectAll == 'function') {
onSelectAll($(this.container).attr('id'), $(this.form_field).attr('id'));
this.results_hide();
}
return true;
}
基本上,如果在“选择的选择”处于打开状态时按Ctrl-A,它将调用onSelectAll
以“选择的”容器的ID和基础选择的ID作为参数的用户定义的委托。如果未按Ctrl键,则希望此设置为默认值,该默认值允许搜索字符串输入照常工作。
回到我的页面,我有以下内容:
function onSelectAll(containerId, selectId) {
var ids = [];
$("#" + containerId).find('.active-result').each(function () { ids.push(parseInt($(this).attr('data-option-array-index'))); });
$(ids).each(function () { $($('#' + selectId + ' option')[this]).attr('selected', 'selected'); });
$('#' + selectId).trigger('chosen:updated');
}
这将在“选择的容器”中获取可见结果的数组索引,在基础选择控件中将其标记为“选中”,然后使“选择的容器”进行更新。
我知道更改标准键盘快捷键的含义并不是完全符合犹太习惯,但是在对其他三个最有可能实际使用此功能的开发人员的非正式调查中,他们都建议这样做,所以我认为我很清楚现在。就是说,非常欢迎提出改进和清理JavaScript的建议-我从事后端和SQL工作已有很长时间了,以至于我完全失去了UI知识。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句