4

我想创建一个包含分组项目的下拉框。它适用于我正在使用的数据库查找 HTML 表单。有没有办法可以选择组标题，从而选择该特定组中的所有项目？例如，如果组标题为“German Cars”并且包含“Mercedes”和“Audi”项，则在单击“German Cars”时，应选择这两家德国汽车公司。

4

2 回答 2

1

如果你给你的 opt-groups 一个类，你可以选择这个类然后访问它的孩子。

$('.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 事件之前查看元素的状态。这允许我们检查它们是否都被选中，如果是，则取消选择而不是选择。并且必须对 的 click 事件执行相同的操作，option以便它可以防止该事件的传播。

我不能 100% 确定这个浏览器的兼容性，但如果你支持它们，你可能想确保它在旧 IE 中工作。

于 2012-02-15T16:41:55.257 回答
0

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

然后，您可以通过各种方式处理此问题。您可以只在服务器端处理这种情况，这样如果“德国汽车”已被选中，表单处理程序的行为就好像德国汽车的每个复选框都已被选中。或者你可以另外有一个“德国汽车”复选框的客户端处理程序，以便检查它会检查各个复选框（但在未选中时是否应该取消选中它们）？

于 2012-02-15T17:13:20.987 回答