Jquery 多选 - 切换隐藏 optgroup 问题
Jquery multiselect - Togggle hide optgroup issues
我已经实施了 jquery multiselect addon 并且运行良好。我有一长串 select 选项，并按 optgroups 划分。虽然 optgroups 组织了我的长列表，但用户仍然需要滚动一段时间才能到达底部选项。我只是在寻找一种解决方案，让 optgroup 默认折叠起来，当您单击该组时不折叠。
当您点击 optgroup 时，它会自动 selects 所有我想阻止的选项，而是用隐藏功能代替它。我知道 jquery 默认情况下不能针对 select 的 optgroup 但 Jquery Multiple select 插件有一个事件处理程序显然也允许你。如果你向下滚动一半 their site 它会为你提供该插件支持的所有事件处理程序。我对 optgrouptoggle 活动非常感兴趣：
Fires when an optgroup label is clicked on. This event receives the original event object as the first argument, and a hash of values as the second argument: 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();
});
这种方法有一些问题，一些在您的代码中，一些在插件的 API:
您的演示代码引用了 $("#selected_items")，它不在您的标记中。将选择器更改为 $("select") 以匹配上面 multiselect 的声明。更好的是，将 jQuery 对象缓存在变量中：var $multiselect = $('select');
文档指定使用 bind 附加事件侦听器，但 bind 在 jQuery 的最新版本中已弃用。请改用 on。
您将两个函数传递给 on/bind 方法——它只需要一个。您可以使用 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.
隐藏生成的 "option" 元素将阻止插件工作——它使用 jQuery 选择器来切换复选框，并且该选择器依赖于关联的元素来可见。
最后一点是障碍：隐藏复选框后，插件将在下一次 optgroup 单击时失败。 Demo of the failing behavior.
如果不直接修改插件代码，目前我真的看不到任何适合你的选项。
我已经实施了 jquery multiselect addon 并且运行良好。我有一长串 select 选项，并按 optgroups 划分。虽然 optgroups 组织了我的长列表，但用户仍然需要滚动一段时间才能到达底部选项。我只是在寻找一种解决方案，让 optgroup 默认折叠起来，当您单击该组时不折叠。
当您点击 optgroup 时，它会自动 selects 所有我想阻止的选项，而是用隐藏功能代替它。我知道 jquery 默认情况下不能针对 select 的 optgroup 但 Jquery Multiple select 插件有一个事件处理程序显然也允许你。如果你向下滚动一半 their site 它会为你提供该插件支持的所有事件处理程序。我对 optgrouptoggle 活动非常感兴趣：
Fires when an optgroup label is clicked on. This event receives the original event object as the first argument, and a hash of values as the second argument: 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();
});
这种方法有一些问题，一些在您的代码中，一些在插件的 API:
您的演示代码引用了
$("#selected_items")，它不在您的标记中。将选择器更改为$("select")以匹配上面multiselect的声明。更好的是，将 jQuery 对象缓存在变量中：var $multiselect = $('select');文档指定使用
bind附加事件侦听器，但bind在 jQuery 的最新版本中已弃用。请改用on。您将两个函数传递给
on/bind方法——它只需要一个。您可以使用 jQuery'stogglemethod. 而不是使用 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.隐藏生成的 "option" 元素将阻止插件工作——它使用 jQuery 选择器来切换复选框，并且该选择器依赖于关联的元素来可见。
hide() 和 show()
最后一点是障碍：隐藏复选框后，插件将在下一次 optgroup 单击时失败。 Demo of the failing behavior.
如果不直接修改插件代码，目前我真的看不到任何适合你的选项。