Question

我有选择器，其中多个选项分组到选项组中。我在点击optgroup标签时尝试切换所有选项的选择/取消选择。

它在初始加载时工作正常，但我也有一个功能，允许我将选项从一个选择器复制到另一个选择器并返回。复制选项后，我的切换停止工作。

$("optgroup").toggle(function(){
    $(this).children().attr("selected", "selected");
}, function() {
    $(this).children().attr("selected", false);
});

这是copy/remove script。

Answer 1

问题与绑定toggle事件有关。当optgroup移入和移出选择时，事件不再附加到新创建的optgroup。可悲的是，切换事件没有实时绑定。你可以将一些东西放在一起，通过以下方式完成工作：

$("optgroup").live("click", function() {
    var $children = $(this).children();
    if($children.attr("selected")) {
        $children.attr("selected", false);
    } else {
        $children.attr("selected", "selected");
    }
});

请记住，这会将click事件绑定到页面上创建的任何optgroup，并且可能会产生一些无法预料的副作用。我建议在课堂上使用live，而不是单独使用optgroup来降低这种风险。

http://jsfiddle.net/Lw6QC/

Answer 2

这将不为您提供所需的用户体验，但它将解决您在切换事件取消绑定时遇到的问题：http://jsfiddle.net/rkw79/SwrVK/9/

$("select").delegate('optgroup', 'click', function() {
    $(this).toggle(function() {
        $(this).children().attr("selected", "selected");
    }, function() {
        $(this).children().attr("selected", false);
    });
});

您可以使用.live（）或.delegate（）;问题是它们只适用于“点击”或“悬停”等基本事件，而不是像'toggle'这样的派生事件（这就是为什么它被包裹在上面）。

请注意，此解决方案解决了无法解决的问题，但就UX而言，还需要进行一些调整。

已更新：用户体验增加 http://jsfiddle.net/rkw79/SwrVK/15/

我认为您的目的是在单击某个组时选择所有子选项。下面的代码就是这样。

$("select").delegate('optgroup', 'click', function() {
    $(this).children().attr("selected", "selected");
});

下面这段代码将使您仍然可以独立选择每个子选项。事件在节点树中向上传播，因此您必须阻止它（在这种情况下）。

$("select").delegate('option', 'click', function(e) {
    e.stopPropagation();
});

使用/ jQuery切换选择选项

2 个答案: