使用jQuery切换选择选项

我将具有多个选项的选择器分组为选项组。单击optgroup标签时，我尝试切换所有选项的选择/取消选择

它在初始加载时运行良好，但我还有一个功能，允许我将选项从一个选择器复制到另一个选择器，然后再复制回来。复制选项后，我的切换将停止工作

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

---

以下是问题。

问题与绑定切换事件有关。当optgroups移入和移出选定对象时，事件不再附加到新创建的optgroups。遗憾的是，切换事件没有实时绑定。您可以通过以下方式将一些东西组合起来完成工作：

$("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来降低此风险

---

问题与绑定切换事件有关。当optgroups移入和移出选定对象时，事件不再附加到新创建的optgroups。遗憾的是，切换事件没有实时绑定。您可以通过以下方式将一些东西组合起来完成工作：

$("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来降低此风险

---

这将不会给您提供所需的用户体验，但它将解决切换事件取消绑定的问题：

您可以使用.live（）或.delegate（）；问题是，它们只适用于“click”或“hover”之类的基本事件，而不适用于“toggle”之类的派生事件（这就是上面包装它的原因）

请注意，此解决方案解决了解除绑定问题，但就用户体验而言，还需要进行一些调整

更新：用户体验新增内容

我认为您的意图是在单击组时选择所有子选项。下面的代码将实现这一点

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

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

---

这将不会为您提供所需的用户体验，但它将解决切换事件取消绑定的问题：

您可以使用.live（）或.delegate（）；问题是，它们只适用于“click”或“hover”之类的基本事件，而不适用于“toggle”之类的派生事件（这就是上面包装它的原因）

请注意，此解决方案解决了解除绑定问题，但就用户体验而言，还需要进行一些调整

更新：用户体验新增内容

我认为您的意图是在单击组时选择所有子选项。下面的代码将实现这一点

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

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

---

---

+我赢了。我有同样类型的解决方案，原因也一样：是的，我在发布我的解决方案时看到了你的解决方案。你真的赢了我。我很高兴得到了答案，因为我现在可以注释=D了。实际上，即使在这些JSFIDLE示例中，我仍然存在问题。。。单击optgroup应该为该optgroup的子级切换选择/取消选择。而且它似乎可以打开和关闭…如果您将用户名更改为我们有机会记住下一个路径交叉点的名称，那就太好了。@santa-问题是mousedown更改了当前选项的选择，因此，对单击事件上的上一个状态的检测将关闭。我正在试验如何修复。+1击败了我。我有同样类型的解决方案，原因也一样：是的，我在发布我的解决方案时看到了你的解决方案。你真的赢了我。我很高兴得到了答案，因为我现在可以注释=D了。实际上，即使在这些JSFIDLE示例中，我仍然存在问题。。。单击optgroup应该为该optgroup的子级切换选择/取消选择。而且它似乎可以打开和关闭…如果您将用户名更改为我们有机会记住下一个路径交叉点的名称，那就太好了。@santa-问题是mousedown更改了当前选项的选择，因此，对单击事件上的上一个状态的检测将关闭。我正在尝试如何修复。这一切看起来都很好，很有意义，但我必须单击第一个optgroup两次以选择所有子项。。。我认为$（“optgroup”）.live（“单击”，函数（）{更精简，但结果没有太好…奇怪…是的，这很好！但是我们失去了切换取消选择的功能，即在所有选项都选中的情况下单击OptGroup。我想需要对每个选项进行额外的查看，以查看它们是否都被选中？。最初我添加了允许打开和关闭所选选项的逻辑，但这是一个逻辑增加了更多的复杂性，但几乎没有什么好处。“select”元素的工作方式是，它会在单击发生时自动取消选择所有其他对象。要实现此逻辑，您必须捕获最初的单击。如果要实现切换效果，您必须管理该默认行为。刚刚实现了code在IE中不起作用……有什么问题吗？@santa:IE中的OptGroups不能有点击事件；也许ie9有。这很痛苦，最简单的解决办法是根本不使用html“select”元素。这看起来很好，也很有意义，但我必须点击第一个optgroup两次来选择所有的子项……我认为$（“optgroup”）.live（“单击”，function（）{更精简，但结果并没有太好…奇怪…是的，这很好！但我们失去了取消选择的切换，即单击optgroups并选择所有选项。我想需要对每个选项进行额外的查看，以查看它们是否都被选中。最初，我添加了允许您切换的逻辑