Question

我已经实现了jquery multiselect addon并且运行良好。我有一长串选择选项，并按选择组划分。虽然optgroups组织了我的长列表，但仍然用户仍需要滚动一段时间才能找到底部选项。我只是在寻找一个解决方案，默认情况下将optgroup折叠，并在您单击该组时取消折叠。

当您点击optgroup时，它会自动选择我想要阻止的所有选项，而不是用隐藏功能替换它。我知道默认情况下jquery不能定位选择的optgroup，但是Jquery Multiple select addon有一个显然也允许你的事件处理程序。如果向下滚动一点their site，它会为您提供此插件支持的所有事件处理程序。我对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) */ });

我试着实现一个show hide函数，如下所示，但我仍然使用jquery，并且可能完全拙劣。任何帮助将不胜感激。

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

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

Answer 1

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

您的演示代码引用了$("#selected_items")，它在您的标记中无处可寻。将选择器更改为$("select")以匹配您上面multiselect的声明。更好的是，将jQuery对象缓存在变量中：var $multiselect = $('select');
文档使用bind指定附加事件侦听器，但在最新版本的jQuery中不推荐使用bind。请改用on。
您将两个函数传递给on/bind方法 - 它只需要一个。{li>
您可以使用jQuery's toggle method而不是hide()和show()。
multiselect插件未在语义上构造其生成的标记，因此optgroups及其子option元素会转换为直接li元素，将optgroup和option元素作为兄弟姐妹。这意味着你不能以你希望的方式使用children()。但是，API为您提供了一种查找与optgroup：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.
隐藏生成的“选项”元素将阻止插件工作 - 它使用jQuery选择器切换复选框，并且该选择器依赖于相关元素可见。

最后一点是阻止程序：隐藏复选框后，插件将在下一个optgroup单击时失败。的 Demo of the failing behavior.

此时我没有看到任何选项，没有直接修改插件的代码。

Jquery multiselect - Togggle隐藏optgroup问题

1 个答案: