Question

我想创建一个包含分组项目的下拉框。这是我正在使用的数据库查找HTML表单。有没有办法可以选择组标题，从而选择该特定组中的所有项目？例如，如果团体标题是“德国汽车”并且有“梅赛德斯”和“奥迪”项目，点击“德国汽车”时，两家德国汽车公司都应该被选中。

Answer 1

如果您为选择组提供课程，您可以选择课程，然后访问其子课程。

$('.german-cars').children();

如果不可用，替代方案有点慢。当你遍历所有的optgroup并单独比较他们的文本然后抓住那些孩子。

编辑：修复选择器。并详细说明：

然后在点击时选择它们：

$('.german-cars').click(function(e) {
    e.preventDefault();
    $(this).children().attr('selected', 'selected');
});

假设元素设置为多个选择。否则，只会选择列表中的最后一辆车。

编辑2

小提琴：http://jsfiddle.net/mbChZ/25/

这些更改应该按照您要找的方式运行。

$(function() {
    $('select optgroup').mousedown(function(e) {
        e.preventDefault();
        if ($(this).children(':selected').length == $(this).children().length) {
            $(this).children().attr('selected', null);
        } else {
            $(this).children().attr('selected', 'selected');
        }
    });
    $('select option').mousedown(function(e) {
       e.stopPropagation();
       e.preventDefault();
       $(this).attr('selected', ($(this).is(':selected'))? null : 'selected');                    
    });
});

我已将事件更改为mousedown，因此我们可以在浏览器处理了mousedown事件之前查看元素的状态。这允许我们检查它们是否全部被选中，如果是，则取消选择而不是选择。并且必须对option的点击事件进行同样的操作，以便它可以阻止在该事件上的传播。

我不是百分之百确定这个浏览器的兼容性，但是如果你支持的话，你可能想确保它适用于旧的IE。

Answer 2

不是以任何可靠的方式。 optgroup仅用于分组选项，而不是用于影响功能。但是你可以使用一组复选框而不是select元素，然后你可以有一个“德国汽车”的复选框，例如在它下面缩进，为不同的德国汽车模型复选框。

然后你可以通过各种方式解决这个问题。你可以只处理服务器端的情况，这样如果检查了“德国汽车”，表单处理程序就好像选择了德国汽车的每个复选框一样。或者您还可以为“德国汽车”复选框设置一个客户端处理程序，以便检查它检查各个复选框（但是如果未选中则应取消选中）？

optgroup选择组标题

2 个答案: