html - optgroup 选择组标题

Question

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

Answer 1

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

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

如果那不可用，替代方案会有点慢。当您遍历所有 optgroup 并单独比较它们的文本时，然后捕获那些 child 。

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

然后在点击时选择它们:

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

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

编辑 2

fiddle :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 的点击事件执行相同的操作，以便它可以防止在该事件上传播。

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