2

我已经实现了jquery 多选插件并让它工作正常。我有一长串选择选项，并按 optgroups 划分。虽然 optgroups 组织了我的长列表，但用户仍然需要滚动一段时间才能到达底部选项。我只是在寻找一种解决方案，让 optgroup 默认折叠并在您单击组时不折叠。

当您单击 optgroup 时，它会自动选择我想阻止的所有选项，而是用隐藏功能代替。我知道默认情况下 jquery 不能以选择的 optgroup 为目标，但 Jquery Multiple select 插件有一个显然也允许您的事件处理程序。如果您将其网站向下滚动一点，它会为您提供该插件支持的所有事件处理程序。我对这个活动非常感兴趣optgrouptoggle：

单击 optgroup 标签时触发。此事件接收原始事件对象作为第一个参数，并接收值的哈希作为第二个参数：js $("#multiselect").bind("multiselectoptgrouptoggle", function(event, ui){ /* event: the original event object, most likely "click" ui.inputs: an array of the checkboxes (DOM elements) inside the optgroup ui.label: the text of the optgroup ui.checked: whether or not the checkboxes were checked or unchecked in the toggle (boolean) */ });

我尝试按如下方式实现一个显示隐藏功能，但我还是 jquery 的新手，可能完全搞砸了。任何帮助，将不胜感激。

http://jsfiddle.net/akhyp/1986/

$("#selected_items").bind("multiselectoptgrouptoggle", function(event, ui){ 
    $(this).children().show();
}, function() {
    $(this).children().hide();
 });
4

1 回答 1

0

这种方法存在一些问题，一些在您的代码中，一些在插件的 API 中：

  1. 您的演示代码引用$("#selected_items")，它不在您的标记中。将选择器更改$("select")为与您的上述声明相匹配multiselect。更好的是，将 jQuery 对象缓存在一个变量中：var $multiselect = $('select');

  2. 文档指定使用bind附加事件侦听器，但bind在最新版本的 jQuery 中已弃用。改为使用on。

  3. 您将两个函数传递给该on/bind方法——它只需要一个。您可以使用jQuery 的方法，而不是使用hide()and 。show()toggle

  4. 该multiselect插件没有在语义上构建其生成的标记，因此optgroups它们的子option元素被翻译成直接的li元素，其中optgroupandoption元素作为兄弟元素。这意味着你不能使用children()你希望的方式。optgroup但是，API 为您提供了一种查找与:关联的复选框的方法ui.inputs。从中，您可以找到每个父li元素并隐藏它们。不幸的是，看起来 API 并没有为您提供直接解决它们的方法，但您可以使用如下代码片段：

    var parentLiOfInput = function(input) { return $(input).closest('li'); }; var $listEls = ui.inputs.map(parentLiOfInput); // $listEls is now an array of jQuery objects // Note this isn't the same as a jQuery wrapped set-- // you can't do $listEls.hide(), for example.

  5. 隐藏生成的“选项”元素将阻止插件工作——它使用 jQuery 选择器来切换复选框，并且该选择器依赖于关联的元素可见。

最后一点是阻止程序：一旦隐藏复选框，插件将在下一次 optgroup 单击时失败。失败行为的演示。

在不直接修改插件代码的情况下，我目前还没有看到任何适合您的选项。

于 2015-02-17T16:34:58.693 回答