如何在jQuery选择的多选AFTER搜索过滤条件中选择所有选项?

Zind

标题几乎说明了一切。

我在页面上有几个选择框,所有选择框都是在ASP.NET Web表单中动态生成的,其中一些包含数百个选项。我希望能够输入搜索字符串,然后选择所有匹配的条目。

使用基本的select控件上的javascript进行全部选择并取消选择全部,然后调用很容易,$('#control-id').trigger('chosen:update');但是在尝试仅选择与搜索过滤器匹配的选项时遇到问题。

对于“如何全选”选项,一个额外的按钮或一个按键,我对此并不挑剔。这是针对仅后端开发人员的页面,因此UI不必一定是100%直观的。

Zind

我最终通过更改所选插件并将以下代码添加到来解决了这个问题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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在jquery中选择没有值的选项?

来自分类Dev

如何在jQuery中选择(获取)所有<select>元素

来自分类Dev

显示从组合框中选择的搜索选项的所有结果

来自分类Dev

从多选检索所有选择的选项

来自分类Dev

从多选检索所有选择的选项

来自分类Dev

角度-从带有过滤器的下拉列表中选择更多选项

来自分类Dev

jQuery Mobile,在选项列表中选择“所有项目”

来自分类Dev

如何选择在jQuery中选择的所有输入?

来自分类Dev

取消选择所有jQuery多选

来自分类Dev

如何在select2 JavaScript multiselect中选择所有选项

来自分类Dev

如何在工作表中搜索从useform多选列表框中选择的匹配值或项目?

来自分类Dev

如何知道从所有选项中选择了哪个单选按钮?

来自分类Dev

如何在jQuery中使用选择名称来获得多个选择的所有选项

来自分类Dev

从选择中选择所有选项并显示每个选项

来自分类Dev

如何在给定行条件的情况下从表中选择所有行?

来自分类Dev

如何根据条件在sqlite中选择所有语句?

来自分类Dev

在多选中选择选定的选项

来自分类Dev

如何在jQuery中选择所有具有匹配属性的元素?

来自分类Dev

如何在表单中选择所有SELECT标记并在JQUERY中检查其值

来自分类Dev

如何在jquery中选择特定<ul>的所有列表元素?

来自分类Dev

如何在R中选择具有特殊条件的行

来自分类Dev

如何在laravel中选择具有差异条件的计数

来自分类Dev

如何在PyMongo中选择所有数据?

来自分类Dev

如何在ObjectListView中选择所有行?

来自分类Dev

如何在handsontable中选择所有复选框

来自分类Dev

如何在Notepad ++中选择标记之间的所有内容?

来自分类Dev

如何在嵌套列表中选择所有父<li>

来自分类Dev

如何在SQL查询中选择所有日期

来自分类Dev

如何在bash脚本中选择所有文件

Related 相关文章

  1. 1

    如何在jquery中选择没有值的选项?

  2. 2

    如何在jQuery中选择(获取)所有<select>元素

  3. 3

    显示从组合框中选择的搜索选项的所有结果

  4. 4

    从多选检索所有选择的选项

  5. 5

    从多选检索所有选择的选项

  6. 6

    角度-从带有过滤器的下拉列表中选择更多选项

  7. 7

    jQuery Mobile,在选项列表中选择“所有项目”

  8. 8

    如何选择在jQuery中选择的所有输入?

  9. 9

    取消选择所有jQuery多选

  10. 10

    如何在select2 JavaScript multiselect中选择所有选项

  11. 11

    如何在工作表中搜索从useform多选列表框中选择的匹配值或项目?

  12. 12

    如何知道从所有选项中选择了哪个单选按钮?

  13. 13

    如何在jQuery中使用选择名称来获得多个选择的所有选项

  14. 14

    从选择中选择所有选项并显示每个选项

  15. 15

    如何在给定行条件的情况下从表中选择所有行?

  16. 16

    如何根据条件在sqlite中选择所有语句?

  17. 17

    在多选中选择选定的选项

  18. 18

    如何在jQuery中选择所有具有匹配属性的元素?

  19. 19

    如何在表单中选择所有SELECT标记并在JQUERY中检查其值

  20. 20

    如何在jquery中选择特定<ul>的所有列表元素?

  21. 21

    如何在R中选择具有特殊条件的行

  22. 22

    如何在laravel中选择具有差异条件的计数

  23. 23

    如何在PyMongo中选择所有数据?

  24. 24

    如何在ObjectListView中选择所有行?

  25. 25

    如何在handsontable中选择所有复选框

  26. 26

    如何在Notepad ++中选择标记之间的所有内容?

  27. 27

    如何在嵌套列表中选择所有父<li>

  28. 28

    如何在SQL查询中选择所有日期

  29. 29

    如何在bash脚本中选择所有文件

热门标签

归档